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="">{{
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的函数
更多推荐
所有评论(0)