Time: 0911
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="/npm/vue"></script><!-- <script src="/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="/npm/vue"></script><!-- <script src="/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="/npm/vue"></script><!-- <script src="/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.
