<style> .box2 { height: 100px; width: 100px; background-color: red; } .box3 { height: 100px; width: 100px; background-color: yellow; } </style>
也可以添加一个v-else块。
另外还有v-else-if块，它是2.1.0新增的。
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
当v-if与v-for一起使用时，v-for具有比v-if更高的优先级。
比如我们可以
我们在js中常用操作dom的css样式属性的方法有很多，在vue中可以直接使用v-bind:class来给每个标签元素添加class。
对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
如果有按钮的话，我们可以通过点击按钮动态的切换class。此外，v-bind:class 指令也可以与普通的 class 属性共存
和如下data：
效果如下
我们可以把一个数组传给v-bind:class,以应用一个 class 列表：
渲染为：
如果你也想根据条件切换列表中的 class，可以用三元表达式：
这样写将始终添加 errorClass，但是只有在 isActive 是 true时才添加 activeClass。
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：
<style>
.box4 { height: 200px; width: 200px; background-color: blue; }
.active {background-color: purple;}
</style>
</head>
<body>
<div id="app">
<!-- v-bind:class(v-bind绑定class,''中为字符串) v-bind:class='{active:isActive}',分别为k和value;其中active为类名;
isActive为变量名,isActive为true时,active属性就会添加到标签中,反之亦然 -->
<div class="box4" v-bind:class='{active:isActive}' ></div>
<!-- v-bind:class绑定数组 ='[]'-->
<div class="box5" v-bind:class='[activeClass,errorClass]' ></div>
<!--只要是标签中的属性都可以用v-bind绑定，自定义属性也可以绑定，
v-*指令系统后边''中的值(除去方法)一定放在data属性里边的,一定要在data中声明，如用'imgSrc'代替src路径 -->
<img v-bind:src="imgSrc">
<!-- v-bind可用':' 代替 v-on可用'@'代替 -->
<!-- "#"为a标签默认刷新一下的事件，"javascript:;"为阻止a标签的默认事件-->
<button v-on:click='changeColor'>切换</button>
</div>
<script>
new Vue({
el:'#app',
data:{
isActive:false, activeClass:'active1 active2 active3',
errorClass:'text-danger1 text-danger2 text-danger3',
},
methods:{
changeColor:function(){
},
// 对象的单体模式=clickhandler:function(){}
clickhandler(e){
// 所有的事件都会传进来一个事件对象 // 阻止a标签的默认事件（类似form表单的submit事件，会自动提交form表单的submit行为，也可以用事件修饰符：
alert(111);
});
</script>
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
结果为：当我点击的按钮的时候，下面p标签的数据也会发生变化，同时button的文字也会发生变化。
然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称
扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。