第八课 Vue中的v-bind指令
Vue中的v-bind指令
v-bind用于属性绑定，使得属性可以动态修改
v-bind动态修改class
动态修改的class名来源于data对象，而非手动给定
- 基础示例
<style>div{width: 100px;height: 100px;border: 3px solid #000;}.bg {background: red;}</style><div id="app"><div v-bind:class="bg"></div></div><script>new Vue({el: '#app',data: {bg: 'bg'}})</script>
- v-bind简写
v-bind可以利用:作为简写方式
<style>div{width: 100px;height: 100px;border: 3px solid #000;}.bg {background: red;}</style><div id="app"><div :class="bg"></div></div><script>new Vue({el: '#app',data: {bg: 'bg'}})</script>
- 多class名不冲突
动态绑定的class与原生class名不冲突，最终会合并成为一个
<style>.test{width: 100px;height: 100px;border: 3px solid #000;}.bg {background: red;}</style><div id="app"><div class="test" :class="bg"></div></div><script>new Vue({el: '#app',data: {bg: 'bg'}})</script>
4） v-bind绑定多class名
<style>.test{width: 100px;height: 100px;border: 3px solid #000;}.bg {background: red;}.color{color: blue;}</style><div id="app"><div class="test" :class="[bg, color]">{{val}}</div></div><script>new Vue({el: '#app',data: {val: 'Hello World !',bg: 'bg',color: 'color'}})</script>
- class状态控制
v-bind中的内容可以以{}运算符配合，进行简单的JS运算
1） 动态切换class
<style>.test{width: 100px;height: 100px;border: 3px solid #000;}.bg {background: red;}</style><div id="app"><input type="button" value="点击我切换显示状态" @click="fun()"><div class="test" :class="{bg: status}"></div></div><script>new Vue({el: '#app',data: {bg: 'bg',status: true},methods: {fun(){this.status = !this.status;}}})</script>
v-bind绑定内嵌样式
v-bind style 可以进行内嵌样式编写，属性值为字符，多属性用逗号分隔
1） 基础示例
<style>.test{width: 100px;height: 100px;border: 3px solid #000;}</style><div id="app"><div class="test" :style="{background: 'red', width: 200 + 'px'}"></div></div><script>new Vue({el: '#app',})</script>
2） 动态内嵌样式
<style>.test{width: 100px;height: 100px;border: 3px solid #000;}</style><div id="app"><div class="test" :style="style"></div></div><script>new Vue({el: '#app',data: {style: {background: 'red', width: 200 + 'px'}}})</script>
- 多样式合并
<style>.test{width: 100px;height: 100px;border: 3px solid #000;}</style><div id="app"><div class="test" :style="[style1, style2]"></div></div><script>new Vue({el: '#app',data: {style1: {background: 'red', width: 200 + 'px'},style2: {height: 200 + 'px'}}})</script>