1.v-if指令
<< v-if指令的作用是：根据表达式的真假切换元素的显示状态
<< 本质是通过dom元素来切换显示状态
<< 表达式的值为TRUE 元素存在于dom树种，为false，从dom树中移除
<< 频繁的切换v-show，反之使用v-if，前者的切换消耗更小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="name">
<input type="button" value="切换按钮" @click="toggleIsShow">
<p v-if="isShow">猴王</p>
<p v-show="isShow">猴王</p>
<h2 v-if="age>17">猴王最帅</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var name = new Vue({
el:"#name",
data:{
isShow:false,
age:18
},
methods: {
toggleIsShow:function(){
this.isShow = !this.isShow;
}
},
})
</script>
</body>
</html>
v-bind指令
<< v-bind指令的作用是：为元素绑定属性
<< 完整语法是 v-bind：属性名
<< 简写的话可以直接省略v-bind，只保留：属性名
<< 需要动态的增删class建议使用对象的方式
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.Dianji{
border:10px solid red;
}</style>
</head>
<body>
<div id="name">
<img v-bind:src="imgsrc" alt="">
<img v-bind:src="imgsrc" alt="" :title="houwang+'!!!'"><!--鼠标放上去显示标题-->
<br>
<!--三元表达式写法^--> <!--如果为真则添加红框，为假添加一个空字符-->
<img v-bind:src="imgsrc" alt="" :class="dianji?'Dianji':''" @click="toggledianji">
<img v-bind:src="imgsrc" alt="" :class="{Dianji:dianji}" @click="toggledianji">
<!--点击之后出现红框-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var name = new Vue({
el:"#name",
data:{
imgsrc:"https://ossgw.alicdn.com/alp/1643071685867-160-280.png",
houwang:"猴王最帅",
dianji:false
},
methods:{
toggledianji:function(){
this.dianji = ! this.dianji;
}
},
})
</script>
</body>
</html>
