做期货在哪个网站查资料,贵州有网站的企业,网站改版重新收录,新女权时代的到来wordpress前面几天#xff0c;学习了vue的button组件、input组件#xff0c;vue模版语法、计算属性等#xff0c;在昨天又根据前面学习的#xff0c;跟着做了一个小的购物车功能#xff0c;今天学习了侦听器和计算属性
计算属性 computed computed是一个只读的状态,如果要修改… 前面几天学习了vue的button组件、input组件vue模版语法、计算属性等在昨天又根据前面学习的跟着做了一个小的购物车功能今天学习了侦听器和计算属性
计算属性 computed computed是一个只读的状态,如果要修改computed定义的变量,不能直接修改,要修改数据源,不然会报错 获取computed数据的时候,是和ref类型,需要加上.value的 例如: console.log(fasName.value); 在es6中,如果使用()这种方式,应该是 (){ab}这种方式,但是当只有一行代码运算的时候,可以去掉双括号 ()ab 下面是根据视频和自己整理的计算属性使用
templateview classoutinput typetext v-modelfirsName placeholder请输入姓名 /input typetext v-modellirsName placeholder请输入名称 /view 球星全称{{firsName-lirsName}}/view !--这是直接在html中使用两个变量进行展示的 --view 球星全称{{fasName}}/view !--这是使用computed进行计算后得到的值 --view 球星全称{{fustName()}}/view !--这是使用方法得到的值但是方法必须要添加 --!-- 为什么要使用计算属性计算属性是有缓存效果的方法是每一次都会调用是很耗内存的 --/view
/templatescript setupimport { ref,computed } from vue;const firsNameref();const lirsNameref();// computed是一个只读的状态,如果要修改computed定义的变量,不能直接修改,要修改数据源,不然会报错// 获取computed数据的时候,是和ref类型,需要加上.value的// 例如: console.log(fasName.value);// 在es6中,如果使用()这种方式,应该是// (){ab}这种方式,但是当只有一行代码运算的时候,可以去掉双括号// ()abconst fasNamecomputed(()firsName.value-lirsName.value);// 下面是定义一个变量,使用方法的形式进行数据操作const fustName()firsName.value-lirsName.value;/scriptstyle langscss scoped
.out{padding: 20px;input{border: 1px solid red;height: 40px;padding:0 10px;margin: 10px 0;}
}/style侦听器watch和watchEffect watch侦听器在每次响应式状态发生变化时触发回调函数第一个参数可以是的第一个参数可以是不同形式的“数据源”它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组
templateview classinput typetext v-modelprocess /{{process}}/view/templatescript setupimport { ref, watch, watchEffect } from vue;// 使用监听器,watch:// 第一种:监听简单的文本框// 第一个参数是数据源,第二个参数是有两个参数,一个代表的是新值,newValue;一个是老值,oldValue;const processref()watch(process,(n,o){console.log(n);console.log(o);})// 第二种:监听一个对象,// 在监听对象的时候,需要用到一种()这种方式,然后跟着是新老值,/* const processref({name:张三,age:29})watch(()process.value.name,(n,o){console.log(n);})*/// watch的深度监听,这里是在{}后面,加上一个deep:true,这就是深度监听的,immediate:true,这是立即执行// 深度侦听需要遍历被侦听对象中的所有嵌套的属性当用于大型数据结构时开销很大。// 因此请只在必要时才使用它并且要留意性能// watch(process,(n,o){// console.log(n);// },{deep:true,immediate:true})// 使用watch监听两个的时候,是要在参数中用数组例如:// watch([变量1,变量2],([n变量1,n变量2],[o变量1,o变量2]){// 操作逻辑// n变量1,n变量2:这是前面数组的新值// o变量1,o变量2:这是前面数据的老值// })// watchEffect侦听器,是不需要添加其他参数的,直接是监听全局的具体用法查看官方文档// watchEffect((){// console.log(需要侦听的变量);// })
/scriptstyle langscss scopedinput{margin: 10px;padding: 0 10px;border: 1px solid red;}
/style
