watch 和 computed

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<!-- watch/computed比较 -->
<div>
<input v-model="firstName" type="text">
<input v-model="lastName" type="text">
<input v-model="fullName" type="text">
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
firstName:'AAA',
lastName:'BBB',
//computed的话不能在date里定义
fullName:'AAA BBB'
}
},
//computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,
// 然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;computed比较适合对多个变量或者对象进行处理后返回一个结果值,
// 也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,
// 只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
// 与watch之间的区别:
// watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象
watch:{
firstName(val){
this.fullName = val + ' ' + this.lastName;
},
lastName(val){
this.fullName = this.firstName + ' ' + val;
},
// 对firstName或者lastName属性的监听会在他们第一次变化后开始进行监听,如果我们想在创建时监听他们,要使用 handler 和 immediate对他们监听
//immediate设为true 监听方法会在创建的时候 执行handler里的方法
// firstName:{
// handler:function(val){
// this.fullName = val + ' ' + this.lastName;
// },
// immediate: true
// },
// lastName:{
// handler:function(val){
// this.fullName = this.firstName + ' ' + val;
// },
// immediate: true
// },
},
// computed:{
// fullName(){
// return this.firstName + ' ' + this.lastName;
// }
// }
}
</script>

 

转载于:https://www.cnblogs.com/caozhuzi/p/11161625.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248540.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[BZOJ]3173: [Tjoi2013]最长上升子序列

题解: 考虑按照元素升序加入 所以对位置在其后的元素LIS无影响 然后从前面位置的最大值转移过来就行 ,,,,平衡树无脑模拟 #include <algorithm> #include <iostream> #include <cstring> #include <cstdio> #include <vector> #include <s…

转:HTTP协议简介与在python中的使用详解

1. 使用谷歌/火狐浏览器分析 在Web应用中&#xff0c;服务器把网页传给浏览器&#xff0c;实际上就是把网页的HTML代码发送给浏览器&#xff0c;让浏览器显示出来。而浏览器和服务器之间的传输协议是HTTP&#xff0c;所以&#xff1a; HTML是一种用来定义网页的文本&#xff0c…

深受企业青睐的华为云

作为中国经济活力与韧性的重要保障&#xff0c;无数中小企业也在为夺得各自领域的冠军你追我赶。而席卷全球的数字化转型浪潮&#xff0c;则将这场冠军争夺赛推向了关键节点。企业数字化的第一步就是业务云端化&#xff0c;对企业来说云计算是不可或缺的数字底座。上云&#xf…

一个程序员的水平能差到什么程度?

老板觉得公司里都是男的&#xff0c;缺少一点阴柔之气&#xff0c;想平衡一下&#xff0c;正巧当时互金公司倒了一大批&#xff0c;大批简历投到公司&#xff0c;老板以为自己也是技术出身&#xff0c;就招了一个三年工作经验的女程序员&#xff0c;互金出来的&#xff0c;要价…

vue路由详解版一目了然

概念 路由的本质就是一种对应关系&#xff0c;比如说我们在url地址中输入我们要访问的url地址之后&#xff0c;浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系&#xff0c;就是路由。 路由分为前端路由和后端路由 1).后端路由是由服务…

go语言环境搭建

1、windows环境搭建   1、安装go   2、安装goland开发工具包 2、test.go /* 可执行文件&#xff0c;包名必须是main */ package main /* fmt 字符串格式化的包 */ import "fmt"/*main入口函数*/ func main() { fmt.Printf("Hello, world" )} View Code…

进阶函数

一、函数对象 函数是第一类对象&#xff1a;函数名指向的值可以被当做参数传递 1.函数名可以被传递 def func():print(func)f func # 函数名可以当做变量名 print(f) # f指向的也是函数func指向函数体代码的内存地址 2.函数名可以被当做参数传递给其他参数 def func():print…

vue脚手架基础API全面讲解【内附多个案例】

vscode-插件补充 vue文件代码高亮插件-vscode中安装 代码提示插件-vscode中安装 知识点自测 想学会今天的内容, 先测测这几个会不会 表达式, 变量是什么 new的作用和含义 实例化对象 什么是对象上的, 属性和方法 对象的赋值和取值 this的指向 npm/yarn是什么, package.json干…

mysql 和 sqlserver sql差异比较

mysql:select * from table_name limit 100,200;--取出从100到200的数据 获取时间&#xff1a;mysql:now() mysql tinyint&#xff08;0,1&#xff09; → bit float &#xff08;decimal(19,4)&#xff09;→ moneytext → ntextvarchar →nvarchar 转载于:https://www.cnblo…

Vue 过滤器、计算属性、侦听器 图解版 一目了然

文章目录本篇学习目标1. vue基础1.0_vue基础 v-for更新监测1.1_vue基础_v-for就地更新1.2_vue基础_虚拟dom1.3_vue基础_diff算法情况1: 根元素变了, 删除重建情况2: 根元素没变, 属性改变, 元素复用, 更新属性1.4_vue基础_diff算法-key情况3: 根元素没变, 子元素没变, 元素内容…

linux shell命令行选项与参数用法详解

问题描述&#xff1a;在linux shell中如何处理tail -n 10 access.log这样的命令行选项&#xff1f;在bash中&#xff0c;可以用以下三种方式来处理命令行参数&#xff0c;每种方式都有自己的应用场景。1&#xff0c;直接处理&#xff0c;依次对$1,$2,...,$n进行解析&#xff0c…

Vue自定义指令原来这么简单

本篇学习目标 能够了解组件进阶知识能够掌握自定义指令创建和使用能够完成tabbar案例的开发 1. 组件进阶 1.0 组件进阶 - 动态组件 目标: 多个组件使用同一个挂载点&#xff0c;并动态切换&#xff0c;这就是动态组件 需求: 完成一个注册功能页面, 2个按钮切换, 一个填写注册…

重载(overload)与重写(override)的区别

overload&#xff08;重载&#xff09;:在同一个类中&#xff0c;方法名相同&#xff0c;参数列表不相同。与返回值类型无关。 override&#xff08;重写&#xff09;:存在同一个类中&#xff0c;或者父子接口中&#xff0c;方法名相同个&#xff0c;参数列表相同。遵循“两同两…

python学习,day3:函数式编程,*arge,**kwargs

对于不固定长度的参数&#xff0c;需要使用*arge&#xff0c;**kwargs来调用&#xff0c;区别是*arge是转换为元组&#xff0c;而kwargs转化为字典 # codingutf-8 # Author: RyAn Bi def test(*args): #参数组print(args)test(1,2,4,6,7,8) #方式1 test(*[1,2,4,5,6]) #方式2 #…

那些被人忽略的Vue导航知识

本篇学习目标 能够了解单页面应用概念和优缺点能够掌握vue-router路由系统使用能够掌握链接导航和编程式导航用法能够掌握路由嵌套和路由守卫能够掌握vant组件库基础使用 1. vue路由简介和基础使用 1.0 什么是路由 目标: 设备和ip的映射关系 目标: 接口和服务的映射关系 目…

passwd命令

-n 在这几天你不能更改密码&#xff01; -x 在n<时间<x在这段时间内你必须修改密码&#xff01; -w 当距离x日期还有w天的时候开始提醒你改密码&#xff01; -i 密码过期i天之后&#xff0c;此密码停用&#xff0c;你也就无法用此密码登陆这个用户了。注意是密码过期之后…

一文带你吃透Vue生命周期(结合案例通俗易懂)

文章目录本篇学习目标1. vue生命周期1.0_人的-生命周期1.1_钩子函数1.2_初始化阶段1.3_挂载阶段1.4_更新阶段1.5_销毁阶段2. axios2.0_axios基本使用2.1_axios基本使用-获取数据2.2_axios基本使用-传参2.3_axios基本使用-发布书籍2.4_axios基本使用-全局配置3. nextTick和nextT…

[SCOI2012]滑雪 (最小生成树 Kruskal)

题目描述 a180285非常喜欢滑雪。他来到一座雪山&#xff0c;这里分布着M条供滑行的轨道和N个轨道之间的交点&#xff08;同时也是景点&#xff09;&#xff0c;而且每个景点都有一编号i(1≤i≤N)和一高度Hi​。a180285能从景点ii滑到景点j当且仅当存在一条i和j之间的边&#xf…

来学习ansibie(1)

# ansible 批量在远程主机上执行命令 python2.7编写 ## 安装 第一步:下载epel源 shellwget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo 第二步:安装 shellyum install -y ansible ## ansible 命令格式 shellUsage: ansible <host-pattern&g…

CQYZOJ P1392 拔河问题

题目\(1\) Description 一个学校举行拔河比赛&#xff0c;所有的人被分成了两组&#xff0c;每个人必须&#xff08;且只能够&#xff09;在其中的一组&#xff0c;且两个组内的所有人体重加起来尽可能地接近. Input 第\(1\)行是一个\(n\)&#xff0c;表示参加拔河比赛的总人数…