指令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>
更多推荐
Vue基础语法之指令v-bind
发布评论