vue-动态 CSS Class
2018-06-14 本文已影响134人
走停2015_iOS开发
操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="Lib/vue.js"></script>
<link rel="stylesheet" type="text/css" href="模块语法.css" />
</head>
<body>
<div id="app">
<h1>动态 CSS Class</h1>
<h2 >事例一</h2>
<div v-on:click="changeColor = !changeColor" v-bind:class="{changeColor:changeColor}">
<span>测试</span>
</div>
<div v-on:click="changeColor = !changeColor" v-bind:class="[who,'show']">
<span class="default" :style="{background:color}">测试</span>
<span class="default" :style="obj">测试</span>
<span class="default" :style="[obj,obj2]">测试</span>
</div>
<h2>事例二</h2>
<button v-on:click="changeColor = !changeColor">Change Color</button>
<button v-on:click="changeLength = !changeLength">Change Length</button>
<div v-bind:class="comClasses">
<span>测试</span>
</div>
</div>
<script src="模板语法.js"></script>
</body>
</html>
- CSS
span{
background: red;
display: inline-block;
padding: 10px;
color: #fff;
margin: 10px 0;
}
.changeColor span
{
background: green;
}
.changeLength span:after
{
content: "length";
margin-left: 10px;
}
- JS
new Vue({
el:'#app',
data:{
changeColor:false,
changeLength:false,
},
methods:{
computed:
{
comClasses:function()
{
return {
changeColor:this.changeColor,
changeLength:this.changeLength,
who:"aaaaaaaaaa",
color:"red",
obj:{background:'red'}，
obj2:{fontSize:'30px'}，
}
}
}
},
})
