vue.js 中v-bind指令的使用
2017-11-30 11:54
701 查看
v-bind是处理HTML中的标签属性的。
例如:
html:
js:
缩写:
绑定CSS样式
在绑定CSS样式是,绑定的值必须在vue中的data属性中进行声明。
1.直接绑定class样式
2.绑定classA并进行判断,在isOK为true时显示样式,在isOk为false时不显示样式。
3.绑定class中的数组
4.绑定class时使用三元表达式判断
5.绑定style
6.用对象绑定style样式
例如:
html:
<div id="#app"> <a v-bind:href='url'></a> </div>
js:
var app=new Vue({ el:'#app', data:{ url:'www.baidu.com' } })
缩写:
<a :href='url'></a>
绑定CSS样式
在绑定CSS样式是,绑定的值必须在vue中的data属性中进行声明。
1.直接绑定class样式
<div :class="className">1、绑定classA</div>
2.绑定classA并进行判断,在isOK为true时显示样式,在isOk为false时不显示样式。
<div :class="{classA:isOk}">2、绑定class中的判断</div>
3.绑定class中的数组
<div :class="[classA,classB]">3、绑定class中的数组</div>
4.绑定class时使用三元表达式判断
<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
5.绑定style
<div :style="{color:red,fontSize:font}">5、绑定style</div>
6.用对象绑定style样式
<div :style="styleObject">6、用对象绑定style样式</div>
var app=new Vue({ el:'#app', data:{ styleObject:{ fontSize:'24px', color:'green' } } })
相关文章推荐
- Vue.js常用指令之循环使用v-for指令教程
- vue.js指令v-for使用以及下标索引的获取
- vue.js指令v-model使用方法
- vue.js指令与事件(v-bind)
- vue常用指令v-bind的使用总结
- Vue.js学习记录之在元素与template中使用v-if指令实例
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
- vue.js--基础 v-bind绑定属性使用
- vue.js指令v-for使用及索引获取
- vue.js使用v-model指令实现的数据双向绑定功能示例
- Vue.js常用指令汇总(v-if//v-show//v-else//v-for//v-bind//v-on等)
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
- 【Vue.js】- Vue.js常用指令的使用
- Vue.js常用指令的使用小结
- 学习使用vue.js(二)声明式渲染 和 指令绑定
- vue.js指令v-for使用以及下标索引的获取
- Vue.js中v-bind v-model的使用和区别
- Vue.js使用v-bind绑定class时的注意事项
- IE下使用bind的JS方法
- JS中使用apply、bind实现为函数或者类传入动态个数的参数