v-show：根据表达式真假，切换元素显示隐藏 原理修改元素display 相比if更节约性能，需要频繁切换用show，只需要切换一次用if
v-if： 根据表达式真假，切换元素显示隐藏 原理删除添加元素
v-bind：根据表达式设置元素属性，如图片src，链接href
我是分割线
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.show {
display: inline;
}
.noShow{
display: none;
}
.myPic{
width:100px;
height:100px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="app">
<!--v-show 根据表达式真假，切换元素显示隐藏 原理修改元素display 相比if更节约性能，需要频繁切换用show，只需要切换一次用if-->
<h2 v-show="true">{{ message1 +'真假写死'}}</h2>
<h2 v-show="isShow">{{ message1 + '根据变量'}}</h2>
<h2 v-show="age >= 18">{{ message1 + '根据条件'}}</h2>
<!--v-if 根据表达式真假，切换元素显示隐藏 原理操作元素 -->
<h2 v-if="isShow">{{ message2 + '根据变量'}}</h2>
<p v-if="age>=18">成年</p>
<p v-else-if="age>=16">青少年</p>
<p v-else>儿童</p>
<!--v-bind:属性名=表达式 根据表达式设置元素属性 -->
<img v-bind:src="imgSrc">{{ message3 + 'src'}}</img> <br>
<img :src="imgSrc">{{ message3 + '简写'}}</img> <br>
<img :class="isShow?'show':'noShow'" :src="imgSrc">{{ message3 + '三目运算符切换class'}}</img> <br>
<img :class="{show:isShow,noShow:!isShow}" :src="imgSrc">{{ message3 + '{类名：布尔值}切换class'}}</img> <br>
<img :style="myStyle" :src="imgSrc">{{ message3 + 'style'}}</img> <br>
<img :class="[classA,classB]" :src="imgSrc">{{ message3 + '[]多个类名'}}</img> <br>
<input @click="change" value="切换变量" type="button"></input>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message1: 'v-show!',
message2: 'v-if!',
message3: 'v-bind!',
isShow: true,
age: 18,
imgSrc: "https://cn.vuejs.org/images/imooc-ad3.png",
myStyle: {
width:'100px',
height:'100px',
border:'1px solid red'
},
classA: 'show',
classB: 'myPic',
},
methods: {
change: function () {
this.isShow = !this.isShow;
}
}
});
</script>
</body>
</html>
我是分割线
前台效果：
vue指令
{{ message1 +'真假写死'}}
{{ message1 + '根据变量'}}
{{ message1 + '根据条件'}}
{{ message2 + '根据变量'}}
成年
青少年
儿童
![]()
{{ message3 + 'src'}}
![]()
{{ message3 + '简写'}}
![]()
{{ message3 + '三目运算符切换class'}}
![]()
{{ message3 + '{类名：布尔值}切换class'}}
![]()
{{ message3 + 'style'}}
![]()
{{ message3 + '[]多个类名'}}