vue的计算和监视属性,附一小实例
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName">
名: <input type="text" placeholder="Last Name" v-model="lastName">
<!--fullName1是根据fistName和lastName计算产生-->
姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1">
姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2">
姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"> </div> <script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A-B'
}, // 计算属性配置: 值为对象
computed: {//什么时候执行?当fullName1被改变或者与其相关的属性被改变都会执行
fullName1 () { // 属性的get()
console.log('fullName1()', this)
return this.firstName + '-' + this.lastName //this 这里代表着vm实例
}, fullName3: {
// 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
get () {
console.log('fullName3 get()')
return this.firstName + '-' + this.lastName
},
// 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
set (value) {// fullName3的最新value值 A-B23
console.log('fullName3 set()', value)
// 更新firstName和lastName
const names = value.split('-')
this.firstName = names[0]
this.lastName = names[1]
}
}
}, watch: {
// 配置监视firstName
firstName: function (value) { // 相当于属性的set
console.log('watch firstName', value)
// 更新fullName2
this.fullName2 = value + '-' + this.lastName
}
}
}) // 监视lastName
vm.$watch('lastName', function (value) {
console.log('$watch lastName', value)
// 更新fullName2
this.fullName2 = this.firstName + '-' + value
})
vue的计算和监视属性,附一小实例的更多相关文章
- VUE:计算属性和监视
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue 计算属性 && 监视属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- Vue的计算属性,监视属性代码理解
1.计算属性:在computed属性对象中定义计算属性的方法,在页面中使用{{方法名}}来显示计算的结果 //计算属性 computed:{ // 计算属性值的一个方法,方法的返回值是属性值,初始化显 ...
- vue生命周期以及vue的计算属性
一.Vue生命周期(vue实例从创建到销毁的过程,称为生命周期,共有八个阶段) 1.beforeCreate :在实例初始化之后,数据观测 (data observer) 和 event/watche ...
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- Vue的计算属性和侦听器
1 计算属性:他是根据对象已有的属性计算出新的属性值.具有缓存的功能,如果原始属性不变,则用缓存.否则,重新计算. 前端 <form> <label>姓</label&g ...
- Vue.js 计算属性是什么
Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
- vue 的计算属性computed自我理解
类型:{ [key: string]: Function | { get: Function, set: Function } } 计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算.注意, ...
- vue的计算属性
在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...
随机推荐
- delay JS延迟执行
window.onscroll = function () { throttle(trrigerAdd,window);};function trrigerAdd(){ var $dHei ...
- ios配置xmpp即时聊天-服务器端
一.安装 到MySQL官网上http://dev.mysql.com/downloads/mysql/,下载mysql可安装dmg版本 比如:Mac OS X ver. 10.7 (x86, 64-b ...
- python 字符串,bytes和hex字符串之间的相互转换
import binascii datastr='13'#string 类型转换为bytedataByte=str.encode(datastr)#byte串 转换为16进制 byte串 ,比如 b' ...
- 关于在多个UItextield切换焦点
本人对于应用的完美用户体验是这样认为:当一个应用是迎合用户习惯 ,并且在人机交互之中降低用户的学习成本 ,由于应用和人的思维方向一致时,就会有共鸣,这对于程序设计是有益的,因为只要愿意去改变总有优雅的 ...
- main.obj:-1: error: LNK2001: 无法解析的外部符号 "public: virtual struct QMetaObject const * __thiscall CustomButton::metaObject(void)const " (?metaObject@CustomButton@@UBEPBUQMetaObject@@XZ)
QTCreator 运行时报错 main.obj:-1: error: LNK2001: 无法解析的外部符号 "public: virtual struct QMetaObject cons ...
- 安装lombok
1. lombok的jar包路径 wangfei@DESKTOP-8AT8HRO MINGW64 /d/gradle-3.4.1/caches/modules-2/files-2.1/org.proj ...
- [JavaScript]Prototype继承
JavaScript相对于其他的编程语言是比较简单的,只要吃透了Prototype和Closure(闭包),基本上就可以说精通JavaScript了. JavaScript里如何实现向Java语言的O ...
- ftp 添加用户及修改用户目录
添加用户 : useradd 用户名 -s /sbin/nologin //限定用户test不能telnet,只能ftp; usermod -s /sbin/bash 用户名 //用户恢复正常 ;该账 ...
- P5021 赛道修建 (NOIP2018)
传送门 考场上把暴力都打满了,结果文件输入输出写错了.... 当时时间很充裕,如果认真想想正解是可以想出来的.. 问你 长度最小的赛道长度的最大值 显然二分答案 考虑如何判断是否可行 显然对于一个节点 ...
- 关于form组件的补充-------formChoice
form组件的Choice字段 还是基于出版社和书的模型来详解 models.py(模型) from django.db import models # Create your models here ...