Vue.js入门笔记5
一、v-show的使用
v-show用来控制当前页面元素是否显示，底层通过display属性设置的，v-show的值是一个布尔类型，只要该布尔类型的值为true，那么相应的页面元素就会显示，否则不会显示
一个小案例：
该案例完成的功能是：当用户点击
button按钮的时候，会不断的改变v-show属性的值，从而让h1标题中的内容在出现和消失这两种状态之间不断的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="test-V-Show">
<input type="button" value="改变标题显示状态" @click="changeIsShow">
<h1 v-show="isShow">这是标题内容</h1>
</div>
<script src="../vue/vue.js"></script>
<script>
const title = new Vue({
el: "#test-V-Show",
data: {
isShow: true
},
methods: {
changeIsShow() {
this.isShow = !this.isShow
}
}
})
</script>
</body>
</html>
更进一步：
v-show属性的值可以是任意逻辑表达式，如下面的案例中，当value>=18的时候，才会将标题显示出来
一个小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示v-show</title>
</head>
<body>
<div id="app">
<input type="button" value="反转标题显示状态" @click="addValue">
<h1 v-show="value>=18">这是h1标题内容</h1>
</div>
<script src="../vue/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
value: 17
},
methods: {
addValue() {
this.value++;
}
}
})
</script>
</body>
</html>
二、v-if的使用
v-if的功能和v-show是相同的，但是它们的底层实现是不同的，v-if在底层是通过移除DOM树中的节点完成的元素的删除，这是比较耗时的操作，v-if的基本使用和v-show是相同的，把上面v-show的案例中v-show替换成v-if一样能完成相同的功能
三、v-bind的使用
v-bind用来改变元素的属性值，有两种用法:v-bind:属性名="属性值"和:属性名="属性值"
一个小案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用v-bind</title>
<style>
.isShow {
display: none;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="添加边框" @click="changeIsActive">
<img v-bind:src="picUrl" alt="" :title="picTitle" :class="isActive?'isShow':''">
<img v-bind:src="picUrl" alt="" :title="picTitle" :class="{isShow:isActive}">
</div>
<script src="../vue/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isActive: true,
picUrl: "https://p26-passport.byteacctimg.com/img/mosaic-legacy/3795/3044413937~300x300.image",
picTitle: "这是图片的提示信息"
},
methods: {
changeIsActive: function () {
console.log(this.isActive)
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>
