Vue绑定class和绑定内联样式的实现方法 Vue绑定class和绑定内联样式的实

绑定class
绑定内联样式

绑定class
方式一：

对象语法：给 v-bind:class传一个对象，以动态地切换 class
当对象中某key对应的值为true时，该key做为className被添加到标签上

.box {width: 100px; height: 100px; background-color: gray; }.circle {border-radius: 50%; }

【Vue绑定class和绑定内联样式的实现方法】{{isCircle}}

初始化时box为方形，点击时切换成圆形，再次点击，切换成方形，以此类推

:class="{circle:isCircle}"还可以写到计算属性computed里，return这个对象

computed:{divChange:function(){return {circle:this.isCircle}}}

方式二：
数组语法：把一个数组传给 v-bind:class，以应用一个 class 列表
css多加一个蓝色背景的效果：

.blue {background-color: blue; }

{{isCircle}}

绑定内联样式
绑定内联样式同样可以用对象语法或数组语法，此处用对象语法和计算属性结合的方法实例：

{{isCircle}}

divStyle：

divStyle: function(){return {backgroundColor:this.color}}

这样就可以将想要的颜色设置到.box上了

小demo：

1.点击box时，切换圆形和方形 ——内联样式绑定
2.初始box颜色为红色，点击开始按钮，每隔一秒切换颜色（红/蓝），再次点击按钮后取消颜色切换 —— class绑定

.box {width: 100px; height: 100px; background-color: red; }.blue {background-color: blue; }

new Vue({el: "#app",data: {isCircle: false,borderRadius: { borderRadius: "50%" },isStart: false,isBlue: false,timer: null},methods: {changeStyle: function () {if (this.borderRadius.borderRadius == "0%") {this.borderRadius.borderRadius = "50%"} else {this.borderRadius.borderRadius = "0%"}},startClick: function () {this.isStart = !this.isStart; }},watch: {isStart: function (val) {var vm = this; if (val) {console.log("开启颜色切换")this.timer = setInterval(function () {vm.isBlue = !vm.isBlue}, 1000)}else{console.log("取消计时器，停止颜色切换")clearInterval(this.timer); this.timer = null; }}}})

效果：