Vue.js之计算属性(computed)、属性监听(watch)与方法选项(methods)
vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html
一、计算属性-computed
1. 作用:能够避免数据冗余,通过计算,可以在已有的data数据中生成新的变量,计算属性的变量将会被缓存
触发时机:当依赖的响应式属性变化才会重新计算
示例:
html:
<!-- 输出:Li XuanJing -->
<div id="app">{{fullName}}</div> script:
var vm = new Vue({
el:'#app',
data:{
fristName:'Li'
lastName:'XuanJing'
},
computed:{
// 仅读取
fullName () {
return this.fristName + ' ' + lastNmae
},
setName :{
//读取和设置(getter、setter)
get () {
return this.fristNmae + ' ' lastName
}
set (v) {
this.lastName = v + lastName
}
}
}
})
// 修改 setName 属性
vm.setName = 'lx' // => 输出: lastName = lxXuanJing
二、属性监听-watch
1. 作用:监听属性的变化
2. 触发时机:当属性发生变化时触发(可以配合v-model等指令使用)
示例(vue.js官方实例):
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
methods:{
someMethod () { /* ...... */}
}
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 绑定一个方法
b: 'someMethod',
// deep=true 深度 watcher(检测每一个伪属性的变化)
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 设置immediate属性后,该回调将会在侦听开始之后被立即调用
d: {
handler: function (val, oldVal) { /* ... */ },
immediate: true
},
e: [
function handle1 (val, oldVal) { /* ... */ },
function handle2 (val, oldVal) { /* ... */ }
],
// watch vm.e.f's value: {g: 5}:监听e.f属性的变化
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1
三、方法选项-methods
作用:Vue实例中,函数需要定义在 methods 对象选项中
触发时机:当methods中的方法被主动调用的时候触发
实例(官方实例):
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
Vue.js之计算属性(computed)、属性监听(watch)与方法选项(methods)的更多相关文章
- [Vue]method与计算属性computed、侦听器watch与计算属性computed的区别
一.方法method与计算属性computed的区别 方法method:每当触发重新渲染时,调用方法method将总会再次执行函数: 计算属性computed:计算属性computed是基于它们的响应 ...
- Blazor和Vue对比学习(基础1.8):Blazor中实现计算属性和数据监听
1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...
- Vue.js的类Class 与属性 Style如何绑定
Vue.js的类Class 与属性 Style如何绑定 一.总结 一句话总结:数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我 ...
- vue.js 中 data, prop, computed, method,watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- vue.js 中使用(...)运算符报错的解决方法
vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSiz ...
- js和jquery实现页面滚动监听
js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...
- Android TextWatcher的使用方法(监听ExitText的方法)
我做了一个查询单词的简单app, 当在EditText中输入单词的时候,点击lookup,则在TextView区域显示出该单词的意思,当EditText中没有任何字符时,显示"word de ...
- v-on可以监听多个方法吗?
原文地址 v-on可以监听多个方法 <template> <div class="about"> <button @click="mycli ...
- vue computed计算属性和watch监听属性解疑答惑
computed计算属性 计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方 ...
随机推荐
- 【剑指Offer】把数组排成最小的数 解题报告(Python)
[剑指Offer]把数组排成最小的数 解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-interviews ...
- LeetCode1238循环码排列
题目 给你两个整数 n 和 start.你的任务是返回任意 (0,1,2,,...,2n-1) 的排列 p,并且满足: p[0] = start p[i] 和 p[i+1] 的二进制表示形式只有一位不 ...
- codeforc 603-A. Alternative Thinking(规律)
A. Alternative Thinking time limit per test 2 seconds memory limit per test 256 megabytes Kevin ha ...
- select......for update会锁表还是锁行
select查询语句是不会加锁的,但是select .......for update除了有查询的作用外,还会加锁呢,而且它是悲观锁. 那么它加的是行锁还是表锁,这就要看是不是用了索引/主键. 没用索 ...
- A New Defense Against Adversarial Images: Turning a Weakness into a Strength
目录 概 主要内容 准则1 准则2 总策略 Hu S, Yu T, Guo C, et al. A New Defense Against Adversarial Images: Turning a ...
- Saliency maps
目录 问题 细节 变量 扩展 代码 Deep Inside Convolutional Networks: Visualising Image Classification Models and Sal ...
- uniapp中scroll-view自定义滚动条
注意事项 需在app.vue中添加如下,需要important /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16upx!imp ...
- 制作登录页面,点击键盘的 Enter 键或者单击“登录”按钮,验证用户输入的邮箱和密码是否正确
查看本章节 查看作业目录 需求说明: 制作登录页面 点击键盘的 Enter 键或者单击"登录"按钮,验证用户输入的邮箱和密码是否正确 实现思路: 准备登录的静态页面 在页面中嵌入脚 ...
- 【MySQL作业】DDL 和 DML——美和易思使用 DML 删除表数据应用习题
点击打开所使用到的数据库>>> 删除客户"刘一鸣". 执行 SQL 代码"delete from customer where cName=' 刘一鸣 ...
- 如何优雅的设置UI库组件的属性?
UI库提供了很多组件,组件又带有很多属性,有一些常用属性我们可以记住并且手撸,但是有些不常用的属性,或者需要设置多个属性,这样的情况下写起来就麻烦了,有时候还要打开帮助文档看看属性是怎么设定的,需要设 ...