我的个人博客

记录我的学习心路历程

0%

705_绑定样式

发表于 分类于 
<body>
    <div id="root">
        <!-- 绑定class样式，字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br />

        <!-- 绑定class样式，数组写法，适用于：要绑定的样式个数不确定，名字也不确定 -->
        <div class="basic" :class="a">{{name}}</div><br />

        <!-- 绑定class样式，对象写法，适用于：要绑定的样式个数确定，名字确定，动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div><br />

        <!-- 绑定style样式，对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div>
    </div>

    <script type="text/javascript">

        //创建Vue实例
        const x = new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root')
            data: {
                name: '西南大学',
                mood: 'red',
                a: ['a1', 'a2', 'a3'],
                classObj: {
                    a1: false,//为false就是不应用，为true就是应用
                    a2: false
                },
                styleObj: {
                    fontSize: '40px'
                }
            },
            //data用于存放数据，数据供el所指定容器服务
            methods: {
                changeMood() {
                    const arr = ['green', 'red', 'zise']
                    const index = Math.floor(Math.random() * 3)
                    this.mood = arr[index]
                }
            },
        })
    </script>
</body>