Vue基础篇-class和style的绑定

第四章

4.1 了解v-bind指令

v-bind指令其实就是一个语法糖，实现动态绑定属性。v-bind可以直接用":"

4.2 绑定class的几种方式

4.2.1 对象语法

<style>
.active{
    color: tomato;
}
.add{
    font-size: 50px;
}
</style>
<body>
    <div id="app">
 <div :class="{'active':isActive,'add':ishave}" class="common">vue</div>
        //对象中可以传入多个属性，:class也可以和class共存
    </div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            // el: document.getElementById('app'),
            data() {
                return {
                    isActive:true,
                    ishave:true
                }
            }
        })
    </script>
</body>

4.2.2 数组语法

<style>
.active{
    color: tomato;
}
.error{
    font-size: 50px;
}
</style>
<body>
    <div id="app">
        <div :class="[activeCls,errorCls]">vue</div>
        //<div :class="[isactive?activeCls:'',errorCls]">vue</div>
        //数组语法里面也可以使用三木运算
      
        //<div :class="[{'active':isactive},errorCls]">vue</div>
        //可以在数组语法中使用对象语法
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            // el: document.getElementById('app'),
            data() {
                return {
                    isactive:true,
                    activeCls:'active',
                    errorCls:'error'
                }
            }
        })
    </script>
</body>

4.3绑定内联样式

4.3.1对象语法

<body>
    <div id="app">
        <div :style="{ fontSize: 20 + 'px',color:'red'}">
        //写法看起来跟内联样式类似
            
        //<div :style="{ fontSize: 20 + 'px','color':color}">
           绑定内联样式
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            // el: document.getElementById('app'),
            data() {
                return {
                    color:'blue'
                }
            }
        })
    </script>
</body>
大多数情况下，直接写一串样式在标签中不便于阅读，所以样式数据在data中
<body>
    <div id="app">
        <div :style="styles">
           style
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            // el: document.getElementById('app'),
            data() {
                return {
                    styles:{
                        color:'red',
                        fontSize:"50px",
                    }
                }
            }
        })
    </script>
</body>

4.3.2 数组语法

应用多个样式可以使用数组语法，但是:style数组语法往往不常用
直接用上面改写的语法就可以了。
<div :style='[styleA,styleB]'></div>

Reviewlike

发布了42 篇原创文章 · 获赞 29 · 访问量 3894

私信关注

Vue基础篇-class和style的绑定

Vue基础篇-class和style的绑定

第四章

4.1 了解v-bind指令

4.2 绑定class的几种方式

4.2.1 对象语法

4.2.2 数组语法

4.3绑定内联样式

4.3.1对象语法

4.3.2 数组语法

猜你喜欢