Vue【v-for指令，计算属性computed，侦听属性】

ps:vue中渲染的意思就是电脑对数据的读取

一，v-for指令
作用1：v-for指令可以对一个数组重复的进行渲染
语法：item in items（items是数据源数组，item是迭代数组元素的名字）
v-for还可以加入第二个参数，索引参数

eg：
HTML代码
<li v-for="{item,index} in items":key="index">
	<a href="">{{index}}.{{item}}</a>
</li>
vue代码
var vm=new Vue({
	el:"#app",
	data:{
	items:["部门管理"，“员工管理”，“职务管理”]
}	

})

上面代码的效果如下。
0.部门管理
1.员工管理
3.职务管理

作用2：v-for还可以遍历一个对象的属性
其中有第二参数键名，第三参数作为索引

eg：

<div v-for="{value,name,index} in emp">
	{{index}}.{{name}}:{{value}}
</div>

<script>
var vm=new Vue({
	el:"#app",
	data:{
		emp:{
			user:"老范"，
			age：88，
			job：“搬运工”
		}
	}
})
</scrpt>

上面的效果就相当于如下
0.user：老范
1.age：88
2.job:搬运工

二，计算属性
作用：完成各种复杂的逻辑运算，最终返回结果
语法：所用计算属性都写在Vue实例computed选项中

eg：实现将英文语句倒转的功能

<div id="app">
	<p>原字符串：“{{message}}”</p>
	<p>字符串转换后：“{{reversedMessage}}”</p>
</div>
<script>
var vm=new Vue({
	el:"#app",
	data:{
		message:"Failure is the mother of success."
		},
		computed:{
		reversedMessage:function(){
		return this.message.split("").reverse().join("")
		}
		}
	}
})
</scrpt>

三，侦听属性——watch
作用：当有一些数据需要随着其他数据的变动而变动的时候，就需要用到侦听属性watch

<span :class="{warn:!priceValid}">商品单价不能为空</span>
<script>
	var vm=new Vue({
		el:"#app",
		data:{
			price:"40",
			priceValid:true;
			},
			watch:{
				price:function(newVal,oldVal){
					if(newVal !=""){
						this.priceValid=true；
					}else{
						this。priceValid=false；
					}
					console.log("新值："，newVal)
					console.log("原值"，oldVal)
				}	
		}
			}
		}
	})
	</scrpt>

watch有一个特点，就是最初版绑定的时候是不会执行的，要改变才能执行。
如果想要一个是让最初值绑定就开始执行，就需要在watch中使用handler（）方法和immediate属性
（1）handler（）方法，其中的值是一个回调函数，监听到变化时应该执行的函数
（2）immediate属性：其值是true或者false，确认是否以当前的初始值执行handler的函数