南宁做网站开发的公司有哪些,做外贸网站注意什么,大庆市城乡建设局网站首页,广告型网站怎么做Vue 计算属性和监视属性
computed computed 计算属性 规则#xff1a;
用已有的属性计算不存在的属性默认调用一次get()只有值不发生改变的时候才可以使用简写#xff08;函数#xff09;#xff1b;值发生改变 使用对象式写法#xff0c;才可以配置set()方法底层原理使…Vue 计算属性和监视属性
computed computed 计算属性 规则
用已有的属性计算不存在的属性默认调用一次get()只有值不发生改变的时候才可以使用简写函数值发生改变 使用对象式写法才可以配置set()方法底层原理使用 object.definProperty(目标对象键名{})
div idappinput typetext v-modelfullNameinput typetext v-modelNames/divVue.config.productionTip false;var vm new Vue({el: #app,data() {return {}},computed: {//标准写法 对象式Names: {get() {console.log(get被调用了);return 99;},set(value) {console.log(value);console.log(set被调用了);}},//简写写法 函数式 没有set值fullName() {console.log(简写的计算方法触发);return 99;}}})watch watch 监视属性 规则
监视已存在的属性mmediate:true 默认调用一次,false不会只有handler方法可以简写;写法:监视的属性(新值,就值){}监视对象中的值需要深度监视.使用deep:true
div idapph1今天的天气{{weather}}/h1h2{{user}}/h2h2{{obj.id}}/h2button clickfunc()切换天气/button/div Vue.config.productionTip false;var vm new Vue({el: #app,data() {return {bool: true,user: ,obj: {id: 99}}},methods: {func() {this.bool !this.bool;}},computed: {weather() {return this.bool ? 炎热 : 凉爽;}},watch: {bool: {immediate: true,deep:true,handler(newValue, oldValue) {console.log(-------bool--------);console.log(newValue);console.log(oldValue);if (newValue true) {this.user 张三;} else {this.user 李四}}},obj: {immediate: true,deep: true, //开启深度监视handler(newValue, oldValue) {console.log(-------obj--------);console.log(newValue);console.log(oldValue);}}//简写// weather(newValue, oldValue) {// console.log(newValue);// console.log(oldValue);// console.log(this);// }},})这是watch的另一种写法 ,写在实例化之外
vm.$watch(user, {immediate: false,deep: false,handler(newValue, oldValue) {console.log(newValue);console.log(oldValue);console.log(this);}})失联
最后编辑时间 202403191731
