在我们日常的开发中,时常会遇到不同样式之间切换,在jquery框架中,我们可以通过固定方法修改属性值,而在vue中,所以我们提供了一种增强型的法,使我们可以为一个标签设置多个值的同时且控制不同的值是否生效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" style="height: 100px;width: 100px;" v-bind:class="{one : oneStatus , two : twoStatus}">
{{message}}
</div>
<script type="text/javascript">
var data = {message:'Hello Vue!',b:false,oneStatus:true,twoStatus:false}
var app = new Vue({
el:'#app',
data:data
});
</script>
<style>
.one{
background-color: red;
}
.two{
background-color: aqua;
}
</style>
</body>
</html>
从上面的代码可以看出这种增强写法,是依赖了v-bind
模板指令使得有多个class属性的预选值
下面我们看效果,当oneStatus:true,twoStatus:false
时
当oneStatus:false,twoStatus:true
时
当然这种依赖v-bind
增强写法也可以用在其他地方,比如说绑定内链样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" style="height: 100px;width: 100px;" v-bind:style="{color : color_val , fontSize : size_val}">
{{message}}
</div>
<script type="text/javascript">
var data = {message:'Hello Vue!',color_val:"green",size_val:"20px"}
var app = new Vue({
el:'#app',
data:data
});
</script>
</body>
</html>
效果如下
总之核心点就是v-bind
可以让某个标签属性有多个预选项