记录v-if 切换元素显示不显示
最开始flg可以切换true和false,但是页面元素不会消失。
原因:methods方法名写错了
学完ES6以后,方法名写成了changeisflg:() => {。。。。。。。}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-if="isflg">这是用v-if控制的元素</h1>
<input type="button" value="isflg" @click="changeisflg">
<input type="button" value="切换flag" @click="isflg = !isflg">
<h1 style="background-color: rebeccapurple;" v-if="buttonid == 'el01'">这是一个h1</h1>
<h2 style="background-color: yellowgreen;" v-else-if=" buttonid == 'el02'">这是一个h2</h2>
<h3 style="background-color: burlywood;" v-else>这是一个h3</h3>
<input type="button" value="el01" @click="changeid1">
<input type="button" value="el02" @click="changeid2">
<input type="button" value="el03" @click="changeid3">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "hello momo",
isflg: true,
buttonid: "el00"
},
methods: {
changeisflg(){
this.isflg = !this.isflg
},
changeid1(){
this.buttonid = "el01"
},
changeid2(){
this.buttonid = "el02"
},
changeid3(){
this.buttonid = "el03"
}
}
})
</script>
</body>
</html>