<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>

        <div id="app">
            <p :style="{color:color,fontSize:px+'px'}">数组</p>
            <input type="text" v-model="px" name="" id="" value="" />字体大小
            <input type="text" v-model="color" name="" id="" value="" />字体颜色
            <p :style="pl">数组</p>
            <p :style="[pl]">数组</p>
            <p :style="{fontSize:'50px'}">对象</p>
            <p :style="{fontSize:size,color:'red'}">对象</p>
            <p :style="[pl]">对象</p>

        </div>

        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    pl: {
                        color: 'blue',
                        fontSize: '3rem',
                    },
                    size: '20px',
                    px: 6,
                    color: ''

                }
            })
        </script>
    </body>
</html>

标签: none

添加新评论