watch对比computed
总结：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>姓名案例_计算属性</title>
8 <!-- 引入vue -->
9 <script type="text/javascript" src="../js/vue.js"></script>
10 </head>
11 <body>
12 <!-- 准备一个div容器 -->
13 <div id="root">
14 姓：<input type="text" v-model="firstName"><br/><br/>
15 名：<input type="text" v-model="lastName"><br/><br/>
16 全名：<span>{{fullName}}</span>
17 </div>
18 </body>
19 <script type="text/javascript">
20 Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
21 const vm = new Vue({
22 el:'#root',
23 data:{
24 firstName:'张',
25 lastName:'三'
26 },
27 computed:{
28 /* 只读不改的简写，实际这里的函数相当于get */
29 fullName(){
30 console.log('get被调用了')
31 return this.firstName + '-' + this.lastName
32 }
33 }
34
35 })
36 </script>
37 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>姓名案例_watch实现</title>
8 <!-- 引入vue -->
9 <script type="text/javascript" src="../js/vue.js"></script>
10 </head>
11 <body>
12 <!-- 准备一个div容器 -->
13 <div id="root">
14 姓：<input type="text" v-model="firstName"><br/><br/>
15 名：<input type="text" v-model="lastName"><br/><br/>
16 全名：<span>{{fullName}}</span>
17 </div>
18 </body>
19
20 <script type="text/javascript">
21 Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
22 const vm = new Vue({
23 el:'#root',
24 data:{
25 firstName:'张',
26 lastName:'三',
27 fullName:'张-三'
28 },
29 watch:{
30 firstName(newValue){
31 this.fullName = newValue + '-' + this.lastName
32 },
33 lastName(newValue){
34 this.fullName = this.firstName + '-' + newValue
35 }
36 }
37 })
38 </script>
39 </html>
watch对比computed的更多相关文章
- vue 生命周期钩子的理解 watch computed
一 理解vue的生命周期,首先需要注意几个关键字 1. el :选择器 2. $el:对应选择器的template模板(html代码) 3. render:也是vue实例中的一项,其参数更接近vue ...
- vue计算属性computed和methods的区别
computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...
- computed属性和watcher
computed属性 在模板中使用表达式是非常方便直接的,然而这只适用于简单的操作.在模板中放入太多的逻辑,会使模板过度膨胀和难以维护.例如: <div id="example&quo ...
- computed、methods、watch
computed:计算属性将被混入到 Vue 实例中.所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例. methods:methods 将被混入到 Vue 实例中 ...
- vue学习笔记4
父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewModel var vm = ne ...
- vue学习笔记3
Vue.js - Day3 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即 ...
- Vue2 学习笔记5
文中例子代码请参考github watch属性的使用 考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变:(用以前的知识如何实现???) 监听data中属性的改变 ...
- Vue.js - Day4
父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewModel var vm ...
- Vue.js - Day3
定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: ...
- 06-Vue路由
什么是路由 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源: 对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有 ...
随机推荐
- .NET开源快速、强大、免费的电子表格组件
前言 今天大姚给大家分享一个.NET开源(MIT License).快速.强大.免费的电子表格组件,支持数据格式.冻结.大纲.公式计算.图表.脚本执行等.兼容 Excel 2007 (.xlsx) 格 ...
- 安装libevent
1.在libevent官网(http://libevent.org/)上下载压缩包(我下载的是libevent-2.1.8-stable.tar.gz) 2.解压压缩包:tar -zxvf libev ...
- C 可变参数函数分析(va_start,va_end,va_list...)
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- NJUPT自控第一次积分赛的小总结（二）基于simpleFOC的无刷电机控制
新人一枚,写的比较水,欢迎大佬指正! 先说一下我用的物料与开发环境吧: 无刷电机:makerbase的2804电机(带AS5600磁编码器) 电机驱动板:simpleFOCmini(学校推荐的) 电池 ...
- 探讨三维模型OBJ格式轻量化在三维展示效果上的重要性
探讨三维模型OBJ格式轻量化在三维展示效果上的重要性 三维模型的OBJ格式轻量化在三维展示效果方面具有重要性.以下是对三维模型OBJ格式轻量化在三维展示效果上的重要性进行分析: 1.提高渲染性能:原始 ...
- [.NET项目实战] Elsa开源工作流组件应用（二）：内核解读
@ 目录 定义 变量 内存寄存器类 寄存器中的存储区块类 变量到存储的映射类 上下文对象 活动上下文(ActivityExecutionContext) 工作流执行上下文(WorkflowExecut ...
- 恶意软件开发（三）经典DLL注入流程
什么是dll注入? DLL注入允许将外部DLL文件加载到进程中并运行其中的代码.DLL(动态链接库)是一种可重用的代码库,它包含在多个程序中使用的函数.类.变量和其他程序代码.DLL注入技术可以通过将 ...
- docker下载mongodb镜像并启动容器
1.查找mongodb相关镜像 docker search mongo 找到相关的镜像进行拉取,如果不指定版本,默认下载最新的mongoDB.建议自己先查找需要那个版本后在进行拉取,因为mongoDB ...
- copy 导入包含特殊符号的文本
客户提供了一份数据记录需要导入数据库,但是文本中有一个列的内容是反斜杠"\" ,因为""是特殊的转义字符,需要使用两个"\"才能表示,如果直 ...
- KingbaseES V8R3 集群运维系列 -- failover切换后集群自动恢复
案例说明: KingbaseES V8R3集群默认在触发failover切换后,为保证数据安全,原主库需要通过人工介入后,恢复为新的备库加入到集群.在无人值守的现场环境,需要在触发failover ...