引言
本文将介绍一下Vue的条件渲染和列表渲染，我们会使用if-else,if-else-if，show等指令。在列表渲染中我们会使用for循环。
条件渲染
我们通过一个示例来解释什么是条件渲染，对于条件渲染，我们只想在满足条件时才渲染我们想要的内容。
- v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue</title>
<link
rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="databinding">
<button
v-on:click="showdata"
v-bind:style="styleobj"
class="btn btn-info"
>
点击
</button>
<span style="font-size:25px;"
><b>{{ show }}</b></span
>
<h1 v-if="show">这是h1标签</h1>
<h2>这是h2标签</h2>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#databinding",
data: {
show: true,
styleobj: {
backgroundColor: "#2196F3!important",
cursor: "pointer",
padding: "8px 16px",
verticalAlign: "middle"
}
},
methods: {
showdata: function() {
this.show = !this.show;
}
}
});
</script>
</body>
</html>
在这个例子中我们创建了一个按钮和两个h标签，声明了一个名为show的变量，并将其初始化为值true。它显示在按钮附近。在单击按钮时，我们调用方法showdata，它切换变量show的值。这意味着在单击按钮时，变量show的值将从true变为false，false变为true。我们单机按钮，show变量的值改为false，h1就不会显示在浏览器，当true时才会显示
- v-else
我们改一下第一个示例中的代码，在h2标签上添加v-else
<h2 v-else>这是h2标签</h2>
这样我们在浏览器打开后，就能看到效果，当h1和h2时交替显示的
- v-show
v-show的行为与v-if相同,它根据给它分配的条件来控制显示和隐藏，v-if和v-show的区别在于，v-if如果条件为false，则从DOM中删除html元素，v-show只是隐藏了元素，也就是添加了display:none样式，内容始终存在与dom中
<div id="databinding">
<button
v-on:click="showdata"
v-bind:style="styleobj"
class="btn btn-success"
>
点击
</button>
<span style="font-size:25px;"
><b>{{ show }}</b></span
>
<h1 v-if="show">H1</h1>
<h2 v-else>H2</h2>
<div v-show="show">
<b>V-Show:</b>
<img src="img/img.jpg" width="100" height="100" />
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#databinding",
data: {
show: true,
styleobj: {
backgroundColor: "#2196F3!important",
cursor: "pointer",
padding: "8px 16px",
verticalAlign: "middle"
}
},
methods: {
showdata: function() {
this.show = !this.show;
}
}
});
</script>
当我们点击show变成false后，我们可以看到DOM中的代码，它仍然在DOM中存在
列表渲染
现在我们条论v-for进行列表渲染
<div id="databinding">
<input
type="text"
v-on:keyup.enter="showinputvalue"
v-bind:style="styleobj"
placeholder="输入水果名"
/>
<h1 v-if="items.length>0">显示水果名称</h1>
<ul>
<li v-for="a in items">{{ a }}</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#databinding",
data: {
items: [],
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods: {
showinputvalue: function(event) {
this.items.push(event.target.value);
}
}
});
</script>
名为items的变量声明为数组。在方法中，有一个名为showinputvalue的方法，它被分配给带有水果名称的输入框。
我们看下生成的代码：
如果我们还想显示数组的索引，修改一下代码
<ul>
<li v-for="(a, index) in items">{{ index }}--{{ a }}</li>
</ul>
总结
以上以简单的示例说明了Vue中的条件渲染和列表渲染，知识点比较简单，需要手动将代码敲出来才能更深刻的理解，希望对你有帮助！