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

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

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

今天的天气是炎热的

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

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

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

    

    
n的值是：{{n}}
    点击n+1
    

    
娜可露露
		
不知火舞
        
鬼畜
		
夏洛特
    

当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 则是被迭代的数组元素的别名。

看个案例

	

			
 {{ parentMessage }} -- {{ index }} -- {{ item.message }}
		

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

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