一、 用对象的方法绑定class
-
说明
- 设置一个对象，可以动态地切换class
- 对象中也可以传入多个属性，来动态切换class,另外，:class可以与普通class共存
- class的表达式过长或者逻辑复杂时候，还可以绑定一个计算属性，这是一种友好和常见的用法，一般当条件多于两个时，都可以使用data或者computed
-
基础使用
<style type="text/css"> .btn { padding: 6px 12px; font-size: 14px; font-weight: normal; } </style> <div id="app"> <button :class="btnClass">绑定对象</button> </div> <script> /** * 静态绑定 */ new Vue({ el: "#app", data: { // 当btnClass改变时将更新class btnClass:'btn' } }) </script> <!--渲染之后 --> <button class="btn">绑定按钮</button> -
绑定对象
<style> .btn { padding: 6px 12px; font-size: 14px; font-weight: normal; } .btn-default { color: #333; background-color: #fff; border-color: #ccc; } </style> <div id="app"> <!-- 这里的active单引号可加不加可不加 多个对象用,逗号隔开 --> <!-- 注意使用-命名一定要加下 单引号 '' --> <p class="btn" :class="{ 'active':isActive,'btn-default':isDefault }" v-text="shop.title"></p> </div> <div id="app"> <button :class="{btn:isActive,'btn-default':isDefault}">绑定按钮</button> </div> <script> new Vue({ el: "#app", data: { isActive: false isDefault: true, } }) </script> <!-- 渲染之后 --> <button class="btn btn-default">绑定对象</button> -
绑定多个对象(data里面中声明)
:class="btnClass" <script> new Vue({ el: "#app", data: { btnClass:{ btn:isActive,'btn-default':isDefault } } }) </script> -
绑定多个对象(computed里面中声明)
<style type="text/css"> .btn { padding: 6px 12px; font-size: 14px; font-weight: normal; } .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); color: #fff; background-color: #5cb85c; border-color: #4cae4c; } <div id="app"> <button class="btn" :class="btnClass" @mouseenter="isEnter" @mouseleave="isLeave">绑定多个属性</button> </div> <script> const vm = new Vue({ el: "#app", data: { isActive: false, isDefault: true, }, computed: { btnClass: function () { return { 'btn-default': this.isDefault, 'active': this.isActive, } } }, methods: { isEnter: function () { this.isActive = true; }, isLeave: function () { this.isActive = false; } } })
二、用数组的方法绑定class
-
说明
当需要应用多个class，可以使用数组语法，给:class 绑定一个数组，应用一个class列表 -
单纯数组
<style type="text/css"> .btn { padding: 6px 12px; font-size: 14px; font-weight: normal; } .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); color: #fff; background-color: #5cb85c; border-color: #4cae4c; } </style> <div id="app"> <button class="btn" :class="['btn-default','active']">绑定多个属性</button> </div> <script> const vm = new Vue({ el: "#app", }) </script> <!--渲染之后 --> <button class="btn btn-default active">绑定多个属性</button> -
数组+对象+三则运算
<style type="text/css"> .btn { padding: 6px 12px; font-size: 14px; font-weight: normal; } .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; } </style> </head> <body> <div id="app"> <!-- 注意 class最好加上单引号，否则有可能不能正确渲染--> <!-- <button class="btn" :class="['btn-default','active']">绑定多个属性</button>--> <!-- 不能使用data里的对象,否则不能正确渲染--> <button class="btn" :class="[{active: isActive},isDanger ? 'btn-danger':'']">绑定数组</button> </div> <script> const vm = new Vue({ el: "#app", data: { btnDefault: 'btn-default', isActive: true, isDanger: true, }, }) </script> <!--渲染后 --> <button class="btn active btn-danger">绑定数组</button>
三、用对象的方式实现style绑定
-
说明
使用v-bind:style=""或者:style语法，style与class类似，可以给元素绑定内联样式,也有对象语法和数组语法,看起来很直接在元素上写CSS -
基本使用
<div id="app"> <a href="#" :style="{'color':color,'font-size':fontSize + 'px','text-decoration':textDecoration}">绑定内联样式</a> </div> <script> /** * 静态绑定 */ new Vue({ el: "#app", data: { color: 'red', fontSize: 18, textDecoration: 'none' } }) </script> -
绑定对象动态修改
<div id="app"> <a href="#" :style="aStyle" @mouseover="aMouseOver" @mouseout="aMouseOut">直接使用对象</a> </div> <script> /** * 静态绑定 */ new Vue({ el: "#app", data: { color: 'red', fontSize: 18, textDecoration: 'none', // 或者 aStyle: { color: 'black', fontSize: 18 + 'px', textDecoration: 'none', }, }, methods: { aMouseOver: function () { this.aStyle.color = 'red' }, aMouseOut: function () { this.aStyle.color = 'black' } } }) -
绑定数组
<div id="app"> <!-- 在实际业务中, :style的数组语法并不常用,因为往往可以写在一个对象里面 --> <a href="#" :style="[aBase,aFont]">绑定数组</a> </div> <script> /** * 静态绑定 */ new Vue({ el: "#app", data: { aBase: { color: 'red', }, aFont: { fontSize: 16 + 'px', textDecoration: 'none', }, }, })
网友评论