1、class的对象绑定方法
<div id="app"> <span :class="{activated: isActivated}" @click = "HandleSpanClick"> {{message}} </span> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Hello', isActivated: false; }, methods: { HandleSpanClick () { this.isActivated = !this.isActivated; } } }) </script>
2、class的数组绑定方法
<div id="app"> <span :class="[activated]" @click = "HandleSpanClick"> {{message}} </span> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Hello', activated: '' }, methods: { HandleSpanClick () { this.activated = this.activated === '' ?'activated' : ''; } } }) </script>
3、style的对象绑定方法
<div id="app"> <!-- //这里的对象,不用加{}.是data中的数据 --> <span :style="Obj" @click = "HandleSpanClick"> {{message}} </span> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Hello', Obj: { color: 'red' } }, methods: { HandleSpanClick () { this.Obj.color = this.Obj.color === 'black' ? 'red' : 'black'; } } }) </script>
4、style的数组绑定方法
<div id="app"> <!-- //这里的对象,不用加{}.是data中的数据 --> <span :style="[Obj, font]" @click = "HandleSpanClick"> {{message}} </span> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Hello', Obj: { color: 'black' }, font: { fontSize: '20px' } }, methods: { HandleSpanClick () { this.Obj.color = this.Obj.color === 'black' ? 'red' : 'black'; } } }) </script>