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有 ...
随机推荐
- 什么是docker的多阶段构建
Docker多阶段构建是一种技术,允许在不同的构建阶段中使用不同的基础镜像,并只复制构建所需的文件和依赖项.这种技术旨在减少最终生成的Docker镜像的大小和运行时的资源消耗. 多阶段构建的一般工作流 ...
- manjaro配置软件源
sudo pacman-mirrors -i -c China -m rank从中选择最快的软件源!
- 面试官：SpringBoot如何优雅停机？
优雅停机(Graceful Shutdown) 是指在服务器需要关闭或重启时,能够先处理完当前正在进行的请求,然后再停止服务的操作. 优雅停机的实现步骤主要分为以下几步: 停止接收新的请求:首先,系统 ...
- 记录--Uniapp + TypeScript 配置文档
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 0 目标 使用 uniapp + TypeScript 为基础栈进行小程序开发 uniapp 是一个使用 Vue.js 开发所有前端应用 ...
- 记录mysql order by xxx limit xxx数据重复的问题
引用 http://vsalw.com/9768.html 记录mysql排序字段有重复值,分页数据错乱问题,下面2个sql 除了分页limit外,其他都一样, 但是第三页的结果却包含部分第二页的数据 ...
- 快速上手系列：XML
一 xml 简介extensible markup language :可扩展标记型语言(1)标记型语言:html 也是标记型语言,即使用标签来操作(2)可扩展: 1)html 里面的标签是固定的,每 ...
- AMD、request.js，生词太多，傻傻搞不清
前言 之前在公司用JS写前端页面,本来自己是一个写后端的,但是奈何人少,只能自己也去写了.但是自己对前端基本不懂,基本就是照着前人写的照着抄,反正大体意思是明白的,但是出现问题了,基本上也是吭哧吭哧好 ...
- nohup操作
nohup操作 背景:vscode 连接服务器远程运行时经常会出现断连需要重新输入密码,如果是在终端跑程序那么中断后无法再恢复在终端的输出,为了能够让程序保留实验结果或需要长时间跑程序而无需值守,需要 ...
- python 写的随机抽奖小程序实现批量抽奖功能
设计思路: 1:导入EXCEL文件中,含有ID,Name两个字段的文件数据做为抽奖池 2:设置奖项,可自定义,放在.txt文件中去读取出来就可以 3:实现单轮可以抽多个名单的功能, 4:保存为.csv ...
- Zookeeper学习笔记-安装
zookeeper官网地址https://zookeeper.apache.org/ 1.卸载CentOS自带的open jdk,安装oracle jdk(1.8) 2.时间同步 #安装ntpdate ...