V标签作用：
4.v-show ：
1.根据真假切换元素的显示状态
2.原理是修改元素的display,实现显示隐藏的效果
3.指令后面的内容，最终都会解析为布尔值
4.值为true元素显示，false隐藏
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsshow">
<!-- 在根目录下保存一张图片 -->
<img src="地址.jpg" v-if="isShow" >
<img src="地址.jpg" v-show="age>=18">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
isShow:false,
age:17
},
methods: {
changeIsshow:function(){
this.isShow = !this.isShow;
}
},
})
</script>
</body>
image.png
image.png
5.v-if：
1.根据表达式的真假，切换元素的显示和隐藏
2.本质是通过操纵dom元素来切换显示状态
3.表达式值为true元素，元素存在于dom树中；为false，从dom树中移除
4.频繁的切换v-show，反之使用v-if，前者的切换消耗小
<body>
<div id="app">
<input type="button" value="切换显示" @click ="toggleIsShow">
<!-- 操作dom元素对性能消耗大 -->
<p v-if="isShow">胃不好吃不了饼</p>
<!-- 频繁切换的元素 -->
<p v-show="isShow">v-show修饰</p>
<p v-if="temperature >= 35">热死啦</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
isShow:false,
temperature:20,
},
methods: {
toggleIsShow:function(){
this.isShow = !this.isShow;
}
},
})
</script>
</body>
image.png
image.png
6.v-bind：
1.v-bind指令的作用是：为元素绑定属性
2.完整的写法是v-bind:属性名
3.简写的话可以直接省略v-bind,只保留 :属性名
4.需要动态的增删class建议使用对象的方式
<style>
.active{
border: thick solid green;
}
</style>
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<br>
<img :src="imgSrc" alt="" :title="imgTitle + '!!!'"
:class="isActive?'active':''" @click="toggleActive">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
imgSrc: "地址.jpg",
imgTitle: "加菲猫",
isActive: false
},
methods: {
toggleActive: function () {
this.isActive = !this.isActive;
}
},
})
</script>
</body>
网友评论