标签：function Vue false show bind app 元素 isShow
一、v-show
根据真假切换元素的显示状态。
注意：
1、原理是修改元素display，实现显示隐藏。
2、指令后面的内容，最终都会解释为布尔值。
3、值为true元素显示，值为false元素隐藏。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<img v-show="isShow" src="img/zhongqiu.jpg" alt="">
<input type="button" value="增加年龄" @click="addAge">
<img v-show="age>=18" src="img/zhongqiu.jpg" alt="">
</div>
<!-- 导入开发版本的Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:15
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
},
addAge:function(){
this.age++;
}
}
})
</script>
</body>
</html>
结果：
初始结果：
点击切换显示状态：
点击三次增加年龄：
二、v-if
根据表达式的真假切换元素的显示状态。
注意：
1、本质是通过操纵dom元素来切换显示状态。
2、表达式的值为true，元素存在于dom树中，为false，从dom树中移除。
3、频繁的切换使用v-show，反之使用v-if，前者的切换消耗小。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<input type="button" value="切换显示" @click="toggleIsShow">
<p v-if="isShow">哈哈哈 v-if</p>
<p v-show="isShow">哈哈哈 v-show</p>
<h2 v-if="temperature>=35">热死啦</h2>
</div>
<!-- 导入开发版本的Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
temperature:40
},
methods:{
toggleIsShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
</html>
结果：
分析：
点击前：
点击后：
三、v-bind
设置元素的属性
注意：
1、完整写法是 v-bind：属性名。
2、简写的话可以直接省略 v-bind，只保留 ：属性名。
3、需要动态增删clss建议使用对象的方式。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.active{
border:10px solid red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="" v-bind:title="imgTitle">
<br>
<!-- 三元表达式 -->
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'"
:class="isActive?'active':''" @click="toggleActive">
<br>
<!-- 对象方式，建议使用 -->
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'"
:class="{active:isActive}" @click="toggleActive">
</div>
<!-- 导入开发版本的Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"img/zhongqiu.jpg",
imgTitle:"中秋",
isActive:false
},
methods:{
toggleActive:function(){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>
结果：
点击图片二或者图片三：
标签：function,Vue,false,show,bind,app,元素,isShow 来源： https://blog.csdn.net/qq_49956121/article/details/120589732
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。