Vue之v-if, v-else, v-show, v-for, v-bind

Time: 20190911

v-if + v-else配合使用

在HTML模板中引入控制逻辑，使得编写前端代码更加灵活。

<!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>Document</title><script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 生产环境 -->
</head>
<body><div id="app"><p v-if="hours < 12">早上好！</p><p v-if="hours >= 12 && hours < 18">中午好！</p><p v-if="hours >= 18">下午好！</p><p>Hello {{ greetee }} !</p><p v-if="path==='/">处于首页</p><p v-else>正处于{{ path }}</p></div><script>var app = new Vue({el: '#app',data: {hours: new Date().getHours(),greetee: 'world',path: location.pathname,},})</script>
</body>
</html>

v-if和v-else出现在相邻的位置上。

v-if和v-show

简单来说，v-if指令判断结果为False，则不会显示DOM元素，显示或者不显示的方式是插不插入真实的DOM元素。

而v-show则是通过CSS样式来控制元素的显示和隐藏。

<div v-if="true">one</div>
<div v-if="false">two</div>
⇒ 输出：<div>one<div><div v-show="true">one</div>
<div v-show="false">two</div>
⇒ 输出：
<div>one<div>
<div style="display: none">two<div>

更直白一点说就是，没经过v-if判断的，都没有机会生成HTML代码，没经过v-show判断的，代码还是会生成的，甚至生成的还更复杂，带上了CSS样式控制。

现实使用时，用v-if更加，因为有些情况下，用的元素判断，该元素不存在，不生成HTML比较好，但用v-show会去访问不存在元素的属性，就会报Bug。

但是v-if的开销比v-show要大，因为它会频繁操作DOM树。

尤其是在频繁切换显示的场景下，用v-show更好。

模板循环：v-for指令

显然这是很好的遍历手段，比如遍历数组，对象等。

<!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>Document</title><script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 生产环境 -->
</head>
<body><div id="app"><ul><li v-for="dog in dogs">{{ dog }}</li> </ul></div><script>var app = new Vue({el: '#app',data: {dogs: ['Rex', 'Rover', 'Henrietta', 'Alan']},created() {// 应用启动时执行console.log("应用启动...")}})</script>
</body>
</html>

遍历数组显示效果

下面是遍历对象的写法：

<!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>Document</title><script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 生产环境 -->
</head>
<body><div id="app"><ul><li v-for="(rent, city) in avgRent">{{ city }}的平均租金为{{ rent }}</li> </ul></div><script>var app = new Vue({el: '#app',data: {avgRent: {London: '$1650',Paris: '$730',NYC: '$3680'}},created() {// 应用启动时执行console.log("应用启动...")}})</script>
</body>
</html>

显示效果：

属性绑定：v-bind

v-bind的作用是，将一个值绑定到HTML属性上。

比如：

<body><div id="app"><button v-bind:type="buttonType">Test Button</button></div><script>var app = new Vue({el: '#app',data: {buttonType: 'submit'},created() {// 应用启动时执行console.log("应用启动...")}})</script>
</body>

这段代码里，v-bind是指令的名称，type是指令的参数，在本例中是属性的名称，将给定的变量绑定到这个属性即可，buttonType是在data中定义的变量。

不仅是type，还可以绑定到disabled, checked等属性名称上。

这种是完整的写法，由于数据绑定是非常普遍的操作，Vue提供了简写法，只需要在参数前面加冒号即可。

<button :type="buttonType">Test Button with no v-vind </button>

效果是一样的。

两种写法取一种即可，保持代码风格的统一很重要。

END.