vue常用指令：v-if练习
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>v-if
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
<style type="text/css">
.qwe{
width:50px;
height:30px;
background:cornflowerblue;
color:aliceblue;
text-align:center;
line-height:30px;
margin-top:30px;
margin-left:20px;
}
.qwe:hover{
cursor:pointer;}
<div id="app">
<div v-if="qq">{{msg1}}
<div v-else>{{msg2}}
<div class="qwe" @click="dianJi">点我
var vm=new Vue({
el:"#app",
data:{
qq:true,
msg1:"哈哈哈哈哈",
msg2:"呜呜呜呜呜"
},
methods:{
dianJi (){
if (this.qq==true){
this.qq=false
}else if(this.qq==false){
this.qq=true
}
console.log(this.qq)
},
}
})
</html>
当“qq”的值为true时，在页面中渲染msg1的内容，当“qq”的值为false时，页面中则不渲染msg1的内容，此时页面会渲染v-else的内容，也就是msg2
