监视数据
❤️ Vue会监视data中所有层次的数据
//vm上,都会为其配置getter和setter来检测数据
person:{
name:‘andy’,
friends:[
{name:‘b1’,age:15},
{name:‘b1’,age:15}
]
}
❤️ 监测对象中的数据
data 后追加的属性,Vue 默认不做响应式处理
如需给后添加的属性作响应式,请使用如下 API:
Vue.set(target.propertyName/index,value)
vm.$set(target,propertyName/index,value)
举例:
methods: {
addsex() {
//添加一个性别属性
Vue.set(this.student, 'sex', '男')
},
updatecar() {
// 为爱好数组里面在索引0的位置添加一个爱好 this就是vm
this.$set(this.student.hobby, 0, '开车')
},
},
❤️ 监测数组中的数据
调用原生对应的方法对数组进行更新
重新解析模板,进而更新页面
❤️ 修改数组中的元素
使用能改变原数组的原生方法
push()、pop()、shift()、unshift()、splice()、sort()、reverse()
不能改变数组,但是返回一个新数组 替换原数组也可以
filter()、concat()、slice()
filterH() {
//过滤需要重新复制
this.student.hobby = this.student.hobby.filter((h) => {
//所有不是右vue控制的回调就用箭头函数
//h是数组里面的数据
return h !== ‘抽烟’
})
}
使用vue或者vue实例对象上的,比如Vue.set()或 vm.$set()不能给vm或vm的根数据对象 添加属性
收集表单数据
🌟 ,则v-model收集的是value值,用户输入的就是value值
🌟 ,则v-model收集的是value值,且要给标签配置value值
🌟
没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
配置input的value属性:如下情况:
v-model的初始值是非数字,那么收集的就是checked(勾选 or 未勾选,是布尔值)
v-model的初始值是数组,那么收集的就是value组成的数组
🌟 v-model的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤
❤️ 语法:
注册过滤器Vue.filter(name,callback) 或 new Vue({filters:{ }})
使用过滤器:{{xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
❤️ 注意:
过滤器也可以接受额外参数,过个过滤器也可以串联
并没有改变原本的数据,是产生新的对应的数据
❤️ 可以定义局部过滤器 和全局过滤器
全局过滤器
Vue.filter(‘myslice’, function (value) {
return value.slice(0, 4)
})
局部过滤器
filters: {
timeFormater(time, str = ‘YYYY年MM月DD日 HH:mm:ss’) {
return dayjs(time).format(str)
},
// myslice(value) {
// return value.slice(0, 4)
// }
}
❤️ 参数分析
timeFormater(time, str = ‘YYYY年MM月DD日 HH:mm:ss’) {
return dayjs(time).format(str)
},
拿本例题来说:
过滤器接受一个默认参数 time =时间戳;如果过滤器里面带了参数就是有两个参数,第一个就是默认的参数,第二个就是 指定格式参数