Vue.js 学习5 Class与Style绑定
2017-06-02 23:19
911 查看
一、绑定Html Class
1.对象语法
<div v-bind:class="{ active: isActive }"></div>
与普通 class 并存:
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>
也可以直接绑定数据里的一个对象
<div v-bind:class="classObject"></div>
data: { classObject: { active: true, 'text-danger': false } }
还可以绑定返回对象的计算属性
<div v-bind:class="classObject"></div>
data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal', } } }
2.数组语法
<div v-bind:class="[activeClass, errorClass]">
data: { activeClass: 'active', errorClass: 'text-danger' }
或使用三元表达式:
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
它们等同于对象语法
<div v-bind:class="[{ active: isActive }, errorClass]">
3.用在组件上
定义组件Vue.component('my-component', { template: '<p>Hi</p>' })
<my-component class="baz boo"></my-component>
会被渲染为
<p class="foo bar baz boo">Hi</p>
同样的适用于绑定HTML class
<my-component v-bind:class="{ active: isActive }"></my-component>
4.绑定内联样式
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: { activeColor: 'red', fontSize: 30 }
css属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case)。
直接绑定到一个对象上:
<div v-bind:style="styleObject"></div>
data: { styleObject: { color: 'red', fontSize: '13px' } }
5.数组语法
<div v-bind:style="[baseStyles, overridingStyles]">
6.自动添加前缀
7.多重值
<div :style="{ display: ["-webkit-box", "-ms-flexbox", "flex"] }">
可以为style绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值。
相关文章推荐
- vue.js学习笔记之绑定style样式和class列表
- 学习使用vue.js(五)绑定Style 与Class
- Vue.js实例学习:Class 与 Style 绑定
- Vue学习—Class与Style绑定
- vue.js入门教程之绑定class和style样式
- Vue.js Class与Style绑定
- vue.js之绑定class和style
- Vue.js学习 Item6 -- Class 与 样式绑定
- Vue.js笔记第二波,Class 与 Style 绑定,条件渲染,列表渲染
- vuejs教程4-Class 与 Style 绑定
- Vue.js之Class 与 Style 绑定
- 详解vue.js之绑定class和style的示例代码
- vue学习记录(数据绑定、class,style绑定)
- Vue.js 之 Class与Style绑定
- [js高手之路] vue系列教程 - 绑定class与行间样式style(6)
- Class 与 Style 绑定HTML Class(vue.js)
- Class 与 Style 绑定内联样式(vue.js)
- Vue.js笔记-计算属性 class与style绑定
- Vue.js学习 Item6 -- Class 与 样式绑定
- Vue.js学习笔记:v-bind属性绑定(class,src)