Version: Next

4. v-show、v-if、v-bind

4.1 v-show

用来控制页面上某个元素是否显示，底层控制的是标签的display属性

v-show接收boolean类型的值

  • true显示

  • false隐藏

  • 接收boolean类型的变量

  • 接收逻辑表达式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2 v-show="showFlag">阿里巴巴欢迎你</h2>
<input type="button" value="显示" @click="show" />
<input type="button" value="隐藏" @click="hide" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
showFlag: false
},
methods: {
show() {
this.showFlag = true;
},
hide() {
this.showFlag = false;
}
}
})
</script>
</body>
</html>

v-show还可以接受逻辑表达式

例如：有一段内容，只有成年人才能观看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h1 v-show="age>=18">成年才能观看</h1>
<input type="button" value="长大到20岁" @click="grow" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
showFlag: false,
age: 14
},
methods: {
grow() {
this.age = 20;
}
}
})
</script>
</body>
</html>

4.2 v-if

v-if用来控制页面元素是否展示，底层是操作DOM元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2 v-if="true">显示我1</h2>
<h2 v-if="showFlag">显示我2</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
showFlag: false,
},
methods: {
}
})
</script>
</body>
</html>

v-show和v-if看起来并没有什么区别，那么它们有区别吗?

v-show和v-if的区别：

  • v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
  • v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
  • v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
  • 如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

4.3 v-bind

v-bind用来给标签绑定相应属性，从而通过vue动态修改标签的属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.cls1{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:title="mytitle" v-bind:class="css" src="https://tse1-mm.cn.bing.net/th/id/OIP.7UGWOO-RZmapid-oaCOLkwHaGa?w=187&h=160&c=7&o=5&pid=1.7" >
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vue = new Vue({
el:"#app",
data:{
mytitle: "!!!!!!!!!!!!!!!!!!!!!",
css:"cls1"
},
methods:{}
})
</script>
</body>
</html>

image-20200507230615529

还可以传递boolean类型的变量，逻辑表达式

v-bind:class="showCss?'cls1':''"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.cls1{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:title="mytitle" v-bind:class="showCss?'cls1':''" src="https://tse1-mm.cn.bing.net/th/id/OIP.7UGWOO-RZmapid-oaCOLkwHaGa?w=187&h=160&c=7&o=5&pid=1.7" >
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vue = new Vue({
el:"#app",
data:{
mytitle: "!!!!!!!!!!!!!!!!!!!!!",
showCss:false
},
methods:{}
})
</script>
</body>
</html>

还可以v-bind:class="{cls1:showCssFlag}"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.cls1{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:title="mytitle" v-bind:class="{cls1:showCssFlag}" src="https://tse1-mm.cn.bing.net/th/id/OIP.7UGWOO-RZmapid-oaCOLkwHaGa?w=187&h=160&c=7&o=5&pid=1.7" >
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vue = new Vue({
el:"#app",
data:{
mytitle: "!!!!!!!!!!!!!!!!!!!!!",
showCssFlag:true
},
methods:{}
})
</script>
</body>
</html>

动态控制加入样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.cls1 {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:title="mytitle" v-bind:class="{cls1:showCssFlag}" src="https://tse1-mm.cn.bing.net/th/id/OIP.7UGWOO-RZmapid-oaCOLkwHaGa?w=187&h=160&c=7&o=5&pid=1.7">
<input type="button" value="动态加入样式" @click="changeCss" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
mytitle: "!!!!!!!!!!!!!!!!!!!!!",
showCssFlag: true
},
methods: {
changeCss() {
this.showCssFlag = !this.showCssFlag;
}
}
})
</script>
</body>
</html>

4.4 v-bind简化写法

v-bind:属性名 --> :属性名

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.cls1 {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<img :title="mytitle" :class="{cls1:showCssFlag}" src="https://tse1-mm.cn.bing.net/th/id/OIP.7UGWOO-RZmapid-oaCOLkwHaGa?w=187&h=160&c=7&o=5&pid=1.7">
<input type="button" value="动态加入样式" @click="changeCss" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
mytitle: "!!!!!!!!!!!!!!!!!!!!!",
showCssFlag: true
},
methods: {
changeCss() {
this.showCssFlag = !this.showCssFlag;
}
}
})
</script>
</body>
</html>

效果不变