页面渲染：v-if,v-else-if,v-else,v-show,v-for

因为时Vue实例来写，所以要引入vue.js

v-show是用来修改style的display值的

<div id="app">
<h2 v-show="ww">今天的天气是炎热的</h2>
</div>

const vm = new Vue({
				el: '#app',
				data: {
                     ww: false
                    }
                    })

这里写了false就表示页面上并不会显示内容，相反，写true的话这句话便会显示在页面

下面是v-if，v-else-if，v-else，为了更好地表示我写了一个小案例

    <div id="app">
    <h3>n的值是：{{n}}</h3>
    <button type="button" @click="n++">点击n+1</button>
    

    <div v-if="n==1">娜可露露</div>
		<div v-else-if="n==2">不知火舞</div>
        <div v-else-if="n==3">鬼畜</div>
		<div v-else>夏洛特</div>
    </div>

当n为一时显示娜可露露，当n为二时显示不知火舞，当n为三时显示鬼畜，当n为其他值时显示夏洛特

const vm = new Vue({
				el: '#app',
				data: {
					n:0
				}
})

v-if => v-else-if => v-else之间是不能被打断的，不然在断开的后面无法生效，例如上面在不知火舞那一行下面加一个p标签，则p标签后面的便不会生效

v-if和v-show的区别
v-if
是真正的条件渲染，因为它会确保在切换过程中事件内的**事件监听器和子组件适当得被销毁和重建。
是有惰性的：如果在初始渲染的时候事件为假，则什么也不做，直到条件第一次变为真的时候，才会开始渲染条件块
v-show
相比v-show就简单的多，不管初始条件是什么，元素始终都会被渲染，而且只是简单地基于css进行切换。

两者的使用
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此，如果需要非常频繁地切换，则用v-show更好一些；如果运行的条件很少改变，则用v-if更好。

v-for

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

看个案例

	<div id="app">
			<p v-for="(item, index) in items"> {{ parentMessage }} -- {{ index }} -- {{ item.message }}</p>
		</div>

const db = new Vue({
				el: "#app",
				data: {
					parentMessage: 'parents',
					items: [
						{
							message: 'Tom'
						},
						{
							message: 'Jerry'
						},
						{
							message: 'Jack'
						}
					]
				}
			})

然后就在页面中渲染出来了，看效果图