老问题
1.forEach(item,i),用于遍历数组,
2.map(item,i),return 后得到一个新的数组,如:
//this.list 用来接收ruturn返回的值
this.list=this.list.map((item, i) => {
//判断条件之后,返回新的item
if (item.id == id) {
item.status = !item.status
}
return item;
})
3.filter(item,i),return后跟的是留下的条件,如:
//this.list用来接收return返回的值
this.list = this.list.filter((item) => {
//return留下的就是id不相等的,组成一个新的数组
return item.id !== id;
})
4.some()和every(),some和every得到的(return)都是布尔值,some只要有一个满足就true,every需要所有都满足才true
新的问题及注意点
1.vue中使用v-for方法适合,后面必须跟上:key='值',这个值一般是id。
2.使用插值表达式渲染页面时,可以使用三目运算符判断对象中的值来决定显示的数据内容。
新的知识
1.computed
这是一个计算属性的关键词(目的还是为了实现双向绑定获取新的数据),里面是方法名字,方法名可以看做data里的属性直接使用(return回来的值)
写法:
<div id="app">
姓:<input type="text" v-model="xing">
名:<input type="text" v-model="ming">
{{ username }}
</div>
<script>
new Vue({
el: '#app',
data: {
xing: '',
ming: ''
},
computed: {
// 计算属性,它是有依赖缓存,只有所依赖的属性发生变化的时候才会重新计算
// 是一个方法,必须有return,返回的值就是这个计算属性的值
// 名称可以直接作为data使用
username () {
return this.xing + this.ming
}
}
})
2.computed的get和set方法
computed中用到get和set方法时候,computed里写的是一个对象,对象里面在去写get和set的方法,get值需要return,set不需要return。用法和define-preperty相似。
例:
<div id="app">
姓:<input type="text" v-model="a">
名:<input type="text" v-model="b">
姓名:<input type="text" v-model="ab">
</div>
<script>
new Vue({
el:'#app',
data: {
a:'',
b:''
},
computed: {
//定义一个ab对象,return回来的值可看做在data上的,直接使用,get方法得到的就是a+b的值,
ab:{
get() {
return this.a+this.b
},
set(num) {
//当ab的值改变时,才会触发set方法重新赋值实现双向绑定
console.log(num)
this.a=num.slice(0,1)
this.b=num.slice(1)
}
}
}
})
</script>
3.watch(不推荐使用)
监听一个值的改变,只要发生了改变都要触发这个函数,每一个watch的值都是一个方法,方法的两个参数第一个是修改之后的值,第二个是修改之前的值,以上例子为例
new Vue({
el: '#app',
data: {
a: '',
b: '',
ab:'',
},
watch: {
//监听a的改变,
a (news,old){
console.log(news,old);
this.ab=news+this.b;
},
b (news,old){
this.ab=news+this.a;
},
ab(news,old){
this.a=news.slice(0,1)
this.b=news.slice(1);
}
}
})