全国咨询热线:18720358503

小程序定制解决方法_详解vue2.0监听属性的使用心

类别:行业新闻 发布时间:2021-01-08 浏览人次:

详解vue2.0监听属性的使用心得及搭配计算属性的使用       这篇文章主要介绍了vue2.0之监听属性的使用心得及搭配计算属性的使用,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助:

1.基础版监听:

场景如下:输入框输入你的年龄,如果年龄在0-15岁提示信息:你还是个小孩,如果年龄在 15-25岁,提示信息:你已经是个少年,如果年龄在25岁以上,提示信息:你已经长大了。根据需求配合监听属性我们得到下面的代码:

 template 
 div id="app" 
 年齡: input type="number" v-model="age" br 
 提示信息: span {{infoMsg}} /span 
 /div 
 /template 
 script 
export default {
 data() {
 return {
 age: "",
 infoMsg:""
 watch:{
 age:function(val,oldval){
 if(val 0 val 15){
 Msg="你还是个小孩"
 }else if(val 15 val 25){
 Msg="你已经是个少年"
 }else{
 Msg="你已经长大了"
 /script 

这里需要特别说明一下的是:坚挺属性方法中的两个参数分别代表的含义:第一个val是当面正在监听的属性的值,oldval是属性改变之前的值,由于这是形参的原因,参数的名字可以自己定义,但是但是参数所代表的含义是不会变化的。

2.进阶版监听:

下面我们改变一下需求:基础规则不变,但是因为后台数据库的更改(画个圈圈咀咒他)我们需要提交一个这样的数据结构

 data() {
 return {
 info: {
 age: ""
 infoMsg: ""
 },
<中的属性age值的变化,所以我们需要使用到的是深度监听,具体代码如下:

 template 
 div id="app" 
 年齡: input type="number" v-model="info.age" br 
 提示信息: span {{infoMsg}} /span 
 /div 
 /template 
 script 
export default {
 data() {
 return {
 info: {
 age: ""
 infoMsg: ""
 watch: {
 info: {
 handler: function(val, oldval) {
 var that = this;
 if (val.age 0 val.age 15) {
 Msg = "你还是个小孩";
 } else if (val.age 15 val.age 25) {
 Msg = "你已经是个少年";
 } else {
 Msg = "你已经长大了";
 deep: true
 /script 

在这里需要注意的有两点:1,这里的function不能使用箭头函数替代,如果使用箭头函数的话,this的指向会是全局。2,你会注意到这里多加入一个属性是deep,它的含义表示是否开启深度监听,如果开启值为true,反之为false。

3.最高级监听:

针对第二个案例不知道你有没有发现一个问题:我们监听的是一个对象里面某个属性的变化,但是如果当这个对象里面有很多个值的时候,虽然也可以使用第二种方法进行监听,但是这将会是对资源的一种极大的浪费,身为一个严谨的程序员(微笑脸),puted(计算属性)对上面的代码进行优化:

 template 
 div id="app" 
 年齡: input type="number" v-model="info.age" br 
 提示信息: span {{infoMsg}} /span 
 /div 
 /template 
 script 
export default {
 data() {
 return {
 info: {
 age: "",
 name: "",
 hobit: ""
 infoMsg: ""
 computed: {
 ageval: function() {
 .age;
 watch: {
 ageval: {
 handler: function(val, oldval) {
 var that = this;
 if (val 0 val 15) {
 Msg = "你还是个小孩";
 } else if (val 15 val 25) {
 Msg = "你已经是个少年";
 } else {
 Msg = "你已经长大了";
 deep: true
 /script 

通过上面的我们看出,,一个是info对象中age的值,性能大大增强,这就是我们期待的结果了。

总结

以上所述是小编给大家介绍的vue2.0监听属性的使用心得及搭配计算属性的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


推荐阅读

小程序定制解决方法_详解vue2.0监听属性的使用心

详细说明vue2.0监视特性的应用感受及配搭测算特性的应用 本文关键详细介绍了vue2.0之监视特性的应用感受及配搭测算特性的应用,十分非常好,具备一定的参照效仿使用价值,必须...

2021-01-08
动态网页制作与静态有哪些实际意义

动态性网页页面制作与静态数据有什么具体实际意义 : :00 静态数据网页页面是网页页面的构成一部分。在这里儿静态数据网页页面的界定是沒有运用动态性技术性的网页页面。牵扯到...

2021-01-08
小程序微信认证了后有哪些特权呢

微信小程序手机微信验证了后有什么权利呢?手机微信微信小程序对外开放公测以后,许多机构都申请注册了自身的微信小程序。申请注册时,也是有很多人用手机微信验证的方法来确...

2021-01-08
网站建设中的首页设计制作不可忽略

企业动态性制造行业新闻资讯建网站有关九度角度强烈推荐信息内容 企业网站建设中的设计方案制作不能忽视 重要词:企业网站建设 网站域名 网站制作 网站建设 重要词 检索排行 网...

2021-01-08
网站安全检测 对thinkphp通杀漏洞利用与修复建议

您的部位: > 新闻报道新闻资讯 > 网站安全性检验 对thinkphp通杀系统漏洞运用与修补提议thinkphp在中国来讲,许多网站站长及其服务平台都会应用这套开源系统的系统软件来建网站,为...

2021-01-08
360全景夜景拍摄的五大要点

晚间拍攝360全景图相片,这针对拍摄新手来讲,应当是最不善于的一种拍攝情景吧。假如,在晚间拍攝出不来来好的相片。估算会出现一一部分朋友是感觉照相机不足“贴心”。实...

2021-01-08
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信