vue Class与Style绑定
2018-07-19 本文已影响23人
rainbowboy
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
绑定 HTML Class
- 对象语法
- 数组语法
绑定内联样式Style
- 对象语法
- 数组语法
下面是代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Class与Style绑定</title>
<script src="../static/vue.js"></script>
</head>
<body>
<div id="app">
<!--绑定 HTML Class:
对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class：-->
对象语法
<div v-bind:class="{active:isActive}"></div>
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
<div v-bind:class="classObject"></div>
<div v-bind:class="classCalcute"></div>
<div v-bind:class="[activeClass, errorClass]">
数组语法
</div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
数组里使用三元表达式
</div>
<my-component class="baz boo">
这是个自定义控件，自定义控件上的添加的类会加载到子控件上。
</my-component>
<!--绑定内联样式：
对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript
对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用
单引号括起来) 来命名：-->
<div v-bind:style="{
color:activeColor,
fontSize:fontSize+'px'
}">
这里是是对象语法绑定style
</div>
<div v-bind:style="styleObject">
对象绑定style
</div>
<!--数组语法
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：-->
<div v-bind:style="[baseStyles,overridingstyle]">
数组绑定style
</div>
<div v-bind:style="[isActive ? baseStyles : overridingstyle]">
数组里使用三元表达式绑定style
</div>
<!--自动添加前缀 当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform ，
Vue.js 会自动侦测并添加相应的前缀。-->
</div>
<script type="text/javascript">
//注册组件
Vue.component('myComponent', {
template: '<p class="foo bar">Hi</p>'
})
var vm = new Vue({
el: "#app",
data: {
isActive: true,
hasError: true,
error: null,
classObject: {
active: true,
"text-danger": true,
},
activeClass: "active",
errorClass: "text-danger",
activeColor: "red",
fontSize: 12,
styleObject: {
color: "blue",
fontSize: "20px",
},
baseStyles: {
color: "green",
},
overridingstyle: {
color: "purple",
transform:"translateX(50px)",
},
},
computed: {
classCalcute() {
return {
active: this.isActive && !this.error,
"text-danger": this.hasError && this.error === "fatal",
}
}
},
})
</script>
</body>
</html>
运行效果：
Class与Style绑定.png
变量值更换请自行操作
