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){
this.infoMsg="你还是个小孩"
}else if(val>15 && val<25){
this.infoMsg="你已经是个少年"
}else{
this.infoMsg="你已经长大了"
}
}
}
}
</script>
这里需要特别说明一下的是:坚挺属性方法中的两个参数分别代表的含义:第一个val是当面正在监听的属性的值,oldval是属性改变之前的值,由于这是形参的原因,参数的名字可以自己定义,但是但是参数所代表的含义是不会变化的。
2.进阶版监听:
下面我们改变一下需求:基础规则不变,但是因为后台数据库的更改(画个圈圈咀咒他)我们需要提交一个这样的数据结构
data() {
return {
info: {
age: ""
},
infoMsg: ""
};
},
由于我们监听的是对象info中的属性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) {
that.infoMsg = "你还是个小孩";
} else if (val.age > 15 && val.age < 25) {
that.infoMsg = "你已经是个少年";
} else {
that.infoMsg = "你已经长大了";
}
},
deep: true
}
}
};
</script>
在这里需要注意的有两点:1,这里的function不能使用箭头函数替代,如果使用箭头函数的话,this的指向会是全局。2,你会注意到这里多加入一个属性是deep,它的含义表示是否开启深度监听,如果开启值为true,反之为false。
3.最高级监听:
针对第二个案例不知道你有没有发现一个问题:我们监听的是一个对象里面某个属性的变化,但是如果当这个对象里面有很多个值的时候,虽然也可以使用第二种方法进行监听,但是这将会是对资源的一种极大的浪费,身为一个严谨的程序员(微笑脸),绝对不能允许这样的事情发生,所以我们可以结合computed(计算属性)对上面的代码进行优化:
<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() {
return this.info.age;
}
},
watch: {
ageval: {
handler: function(val, oldval) {
var that = this;
if (val > 0 && val < 15) {
that.infoMsg = "你还是个小孩";
} else if (val > 15 && val < 25) {
that.infoMsg = "你已经是个少年";
} else {
that.infoMsg = "你已经长大了";
}
},
deep: true
}
}
};
</script>
通过上面的我们看出,这次我们监听的是计算属性ageval,而计算属性返回的则是info对象中age的值,与第二次的代码进行比较我们可以发现两次代码中监听的一个是对象info,一个是info对象中age的值,性能大大增强,这就是我们期待的结果了。
vue2.0之监听属性的使用心得及搭配计算属性的使用的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- Vue2实践computed监听Vuex中state对象中的对象属性时发生的一些有趣经历
今天想实现一个功能,在全局中随时改变用户的部分信息.这时候就想到了用Vuex状态控制器来存储用户信息,在页面中使用computed来监听用户这个对象.看似一个很简单的逻辑,就体现了我基本功的不扎实呀. ...
- vue2.0 添加监听滚动事件
export default { data () { return { isFixed: true } }, mounted () { window.addEventListener('scroll' ...
- Vue2.0 【第二季】第7节 Component 组件 props 属性设置
目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...
- 前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Android 5.0 以上监听网络变化
大家好,大概有一个多月没有更新博客了,我是干什么去了呢?很明显,程序员当然要加班……这一次跟大家分享一下新项目的一些心得. 监听网络变化在开发中是经常用到的,例如我们断网有一些友好的提示,或者根据不同 ...
- swift4.0 方法监听Selector写法总结
import UIKit class MainViewController: UITabBarController { //MARK:属性 懒加载 lazy var composeBtn = UIBu ...
- cocos2d-js 3.0 RC0 监听返回键、菜单键、进入后台(home键)、恢复显示等事件
cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, onKeyReleased: function(keyCode, eve ...
- vue 2.0 watch 监听对象的变化
随机推荐
- [转]jQuery调用ASPX返回json
本文转自:http://www.cnblogs.com/fire-phoenix/archive/2009/11/13/1614146.html 本文介绍如何在ASP.NET(ASP.NET/AJAX ...
- telnet不能用,提示:-bash: telnet: command not found
1.[root@localhost ~]# telnet bash: telnet: command not found 2. 查询了是否安装Telnet包,结果如下: [root@localhos ...
- pat04-树7. Search in a Binary Search Tree (25)
04-树7. Search in a Binary Search Tree (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 ...
- Aspose.Words导出图片 表格 Interop.Word
先定义一个WORD 模板, 然后替换文本.域 ,定位开始表格 文本和段落 // Specify font formatting Aspose.Words.Font font = builder.Fon ...
- 拿到返回值,Callable示例
- 应该知道的一些Markdown语法
目录 快速输入标题 斜体和粗体,删除线 分隔线 外链接 无序列表 有序列表 定义型列表 插入图片 文字引用 标签分类 表格 行内代码块 代码段 注脚 待办事宜 Todo 列表 显示当前文章的目录 快速 ...
- ArcGIS创建要素类
在使用ARCGIS软件进行工作时,免不了要建立地理数据库和要素类之类的.一下是我创建文件地理数据库并在数据库中创建要素类写相关步骤: 1.启动软件,可以使用ARCCatalog直接进行创建也可以使用A ...
- Eclipse reference
http://download.csdn.net/download/ling_min/4318719 http://www.qualityeclipse.com/eclipse-gef http:// ...
- Python 爬虫实战(二):使用 requests-html
Python 爬虫实战(一):使用 requests 和 BeautifulSoup,我们使用了 requests 做网络请求,拿到网页数据再用 BeautifulSoup 解析,就在前不久,requ ...
- ChromiumFX
序言 开发C#桌面应用程序有很多选择,比如WinForm或WPF. 这里我们用ChromiumFX. 目录 一.Centos7 从零编译Nginx+PHP+MySql 二.Centos7 从零配置Ng ...