Vue基础语法之指令v-bind

指令v-bind"/>

Vue基础语法之指令v-bind

指令v-bind

• 可以绑定变量、表达式、执行函数等内容
• 动态绑定属性,属性中的值可以从变量中获取
• 和普通类同时存在时，并不会冲突

1、v-bind动态绑定class属性

1. 变量用法

• 动态绑定属性,属性中的值可以从变量中获取
• 语法糖(简写形式)

<div id="app"><img v-bind:src="imgUrl"><a v-bind:href="aHref">百度一下</a><!--语法糖(简写形式)--><img :src="imgUrl"><a :href="aHref">百度一下</a>
</div>
<script src="../Js/vue.js"></script>
<script>var app = new Vue({el: '#app',data: {message: '今天天气真好！',imgUrl: '.jpg!q70.jpg.webp',aHref:"/"}});
</script>

2. 对象用法

键值对 类名：boolean
在使用对象绑定类名时， 应将类名作为对象键名， 当键值被判定为真时，类名将被绑定到节点上。

<style>.active {color: crimson;}.lines{background-color: red;}
</style>
<div id="app"><h2 class="active">{{message}}</h2><!--键值对类名：boolean
在使用对象绑定类名时， 应将类名作为对象键名， 当键值被判定为真时，类名将被
绑定到节点上。--><h2 v-bind:class="{active:isActive, lines:isLine}">{{message}}</h2><button v-on:click="btnClick">按钮</button>
</div><script>var app = new Vue({el: '#app',data: {message: '今天天气真好！',isActive: true,isLine:true},methods: {btnClick: function () {this.isActive = !this.isActive}yonghua}})
</script>

3.数组形式

<style>.titles {color: crimson;}</style>
<div id="app"><!--active相当于变量，lines相当于变量--><h2 class="titles" v-bind;class="[active,lines]"> {{message}}</h2><!--active相当于字符串，lines相当于字符串--><h2 class="titles" v-bind;class="[‘active’,‘lines’]"> {{message}}</h2>
</div>
<script src="../Js/vue.js"></script>
<script>var app = new Vue({el: '#app',data: {message: '今天天气真好！',active: 'aaa',lines: 'bbb'}})
</script>
</body>

4.复杂情况

如果过于复杂，则可以放入一个methods或computed中

<script src="../Js/vue.js"></script>
<style>.active {color: crimson;}.lines {background-color: red;}
</style>
<div id="app"><h2 class="active">{{message}}</h2><!--键值对
可以共存，isActive和isLine是Boolean值
--><h2 v-bind:class="{active:isActive, lines:isLine}">{{message}}</h2>//调用函数<h2 v-bind:class="getClasses()">{{message}}</h2><button v-on:click="btnClick">按钮</button>
</div>
<script>var app = new Vue({el: '#app',data: {message: '今天天气真好！',isActive: true,isLine: true},methods: {btnClick: function () {this.isActive = !this.isActive},getClasses: function () {return {active: this.isActive, //注意要加 thislines: this.isLine}}}})
</script>

2、v-bind 绑定style

1.对象语法

• 对象的key是css属性

• 对象的value是具体的值，值可以来自于data的属性

<div id="app"><!-- <h2 v-bind:style="{key(属性名);value(属性值)}"></h2>--><h2 v-bind:style="{fontSize:'100px',color:fcolor}">{{ message}}</h2><!--如果200px不加单引号，则将200px当成变量去解析，加单引号则当成字符串--><h2 v-bind:style="{fontSize:fsize}">{{ message}}</h2><h2 v-bind:style="{fontSize:fsize+'px'}">{{ message}}</h2><!--当成表达式--><h2 v-bind:style="getStyles()">{{message}}</h2>
</div>
<script src="../Js/vue.js"></script>
<script>let app = new Vue({el: '#app',data: {message: '今天天气真好！',fsize: 100,fcolor: 'red'},methods: {getStyles: function () {return {fontSize: this.fsize + 'px', color: this.fcolor}}}})
</script>

2.数组语法

后面跟一个数组类型，多个值已逗号分隔

<div id="app"><h2 v-bind:style="[baseStyle1,baseStyle2]">{{message}}</h2>
</div>
<script src="../Js/vue.js"></script>
<script>var app = new Vue({el: '#app',data: {message: '今天天气真好！',baseStyle1: {backgroundColor: 'red'},   /*键值对*/baseStyle2: {fontSize: '100px'}}})
</script>