西宁市建设局官方网站,head first wordpress,手机网站dedecms,运营管理八个模块目录 第一种情况#xff1a;直接修改计算属性
不生效举例
解决方案1#xff1a;直接修改依赖变量 解决方案2#xff1a;为计算属性设置 set 方法 第二种情况#xff1a;直接修改依赖数据
不生效举例
解决方案 第一种情况#xff1a;直接修改计算属性
在Vue中#x…目录 第一种情况直接修改计算属性
不生效举例
解决方案1直接修改依赖变量 解决方案2为计算属性设置 set 方法 第二种情况直接修改依赖数据
不生效举例
解决方案 第一种情况直接修改计算属性
在Vue中computed属性是用来声明计算属性的。计算属性是基于它们的依赖进行缓存的只有在它的相关依赖发生改变时才会重新求值。因此如果你尝试直接修改一个计算属性的值这个修改是不会生效的。计算属性的值是由它们的函数逻辑计算得出的而不是通过直接赋值来设置的。
不生效举例
templatediv clickchangeRead{{ readOnly }}/div
/template
scriptexport default {data(){return {canRead:true}},computed:{readOnly(){return this.canRead}},methods:{changeRead(){//此时点击该方法 修改无效控制台还会出现警告信息this.readOnly false}}}/script 如果你希望修改一个计算属性的值并使其生效你需要通过修改计算属性所依赖的数据来触发重新计算。只有当计算属性依赖的数据发生变化时计算属性才会重新计算并更新值。 解决方案1直接修改依赖变量 //这样会生效this.canRead false 解决方案2为计算属性设置 set 方法
templatediv clickchangeRead{{ readOnly }}/div
/template
scriptexport default {data(){return {canRead:true}},computed:{readOnly:{get(){return this.canRead},set(val){//设置了set方法可直接修改计算属性//在这里修改依赖数据this.canRead val}}},methods:{changeRead(){//直接修改计算属性this.readOnly false}}}/script 第二种情况直接修改依赖数据
通过第一种情况我们知道了要修改计算属性的值必须要修改计算属性的依赖变量但有一种情况及时修改了依赖变量的值计算属性的值任然不会变化
不生效举例
templatediv clickchangeRead{{ readOnly }}/div
/template
scriptexport default {data(){return {canRead:true,readOnly:true,}},computed:{readOnly(){return this.canRead}},methods:{changeRead(){//修改计算属性的依赖变量this.canRead false}}}/script 原因就是因为在data中有与computed属性同名的变量 在vue中如果遇到同名变量data中的优先级会大于computed 解决方案
解决方案就是当你发现无论如何怎么修改计算属性的值都没有变化的时候看一看data中或props中是否有跟计算属性同名的变量这时候就要考虑是要删除该变量还是改变计算属性的命名了。
