- v-show：用于控制页面的标签元素是否展示，底层通过控制元素的display属性来进行标签的显示与隐藏控制
- v-if：同样用于控制页面中的标签元素是否展示，底层通过对dom树节点进行添加和删除来控制显示与隐藏控制，效率要低于v-show
- v-bind：用于给页面中的标签属性绑定相应的属性
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="num">
<p v-show="isShow">{
{number}}</p>
<p v-if="isShow">{
{number}}</p>
<input type="button" v-bind:value="msg" @click="hideOrShow">
</div>
<script>
const num = new Vue({
el:"#num",
data:{
number:0,
msg:"点击隐藏",
isShow:true
},
methods:{
hideOrShow:function(){
if(this.isShow) {
this.msg="点击显示";
}else {
this.msg="点击隐藏";
}
this.isShow = !this.isShow;
}
}
});
</script>
</body>
</html>
分别给两个p标签添加v-show和v-if属性，值为相同的isShow，按钮的value属性通过v-bind绑定值msg，点击按钮，两个p标签隐藏，按钮显示“点击显示”，再点击按钮，两个p标签显示，按钮显示“点击隐藏”。
