【vue】computed 和 watch
计算属性：computed 监听多个变量且变量是在vue实例中(依赖某个变量，变量发生改变就会触发)
侦听器： watch 监听一个变量的变化
使用场景：watch(异步场景) computed(数据联动)
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>computed 和 watch</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
</head>
<body>
<div id="app">
watch：{{msg}}
<div>computed：{{msg1}}</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'message',
other:'word'
},
watch:{
msg(newVal,oldVal){
console.log('msg:' + newVal);
console.log('msg:' + oldVal);
}
},
computed:{
msg1(){
return this.msg +' ' + this.other
}
}
});
app.msg = 'Hello';
app.other = '小红'
</script>
</body>
</html>
【vue】computed 和 watch的更多相关文章
- vue computed 原理
vue computed 主要依靠数据依赖来更新,这里不展示computed源代码,只展示核心思想. computed: { a(){ return this.b ++ } } data:{ b: 1 ...
- Vue computed props pass params
Vue computed props pass params vue 计算属性传参数 // 计算 spreaderAlias spreaderAlias () { console.log('this. ...
- vuex bug & vue computed setter
vuex bug & vue computed setter https://vuejs.org/v2/guide/computed.html#Computed-Setter [Vue war ...
- vue computed、methods、watch的区别
1.computed(计算属性)computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上), 2.methods(方法)写在html中的时候需要带()支持传参,且需要有触发条件 ...
- Vue computed属性
computed vs methods 我们可以使用Vue中的method计算出学科的总分,最终得到的总数结果是相同的. 在上例的基础上,我们把computed区块中的totalMarks函数整体移到 ...
- 深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...
- vue computed的执行问题
1.在new Vue()的时候,vue\src\core\instance\index.js里面的_init()初始化各个功能 function Vue (options) { if (process ...
- vue computed 可以使用getter和setter
var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // ...
- Vue -computed传参数
vue 中computed想传递参数怎么办? 闭包在这里起到的重要的作用 <input v-model="newItem(key,val)" type="text& ...
- vue - computed
computed 的作用主要是对原数据进行改造输出.改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……. 一.格式化输出结果: 我们先来做个读出价格的例子:我们读书的原始数据是price:1 ...
随机推荐
- Flutter制作Toast会自己关闭的消息提示框
项目中需要用到类似安卓的Toast提示框,因为flutter中又没有相关组件,然后在网上看到个不错的,地址https://www.jianshu.com/p/cf7877c9bdeb,然后拿过来修改了 ...
- Linux字符编码默认为UTF-8，如出现乱码可设置为GBK
Linux字符编码默认为UTF-8,如出现乱码可设置为GBK1.手动更改profile文件的命令: vi /etc/profile 也可以修改 /etc/sysconfig/i18n 文件,如 LAN ...
- Css设置字体
另,考虑到文件编码问题,在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名:Mac OS的一些:Georgia 数字高低起伏Comic Sans MS 好看的英文字体华文细黑:STH ...
- salt收集windows服务器日志时间
定义收集时间区间: time.ps1 $a = get-date $b = $a.adddays(-) $c = $b.tostring('yyyy-MM-dd') $d = get-date -fo ...
- openstack部署glance
一.建立glance数据库并且给权限设置第三方登录 mysql -uroot -p0330 CREATE DATABASE glance; GRANT ALL PRIVILEGES ON glance ...
- java+服务器上传和下载文件
1.介绍enctype enctype 属性规定发送到服务器之前应该如何对表单数据进行编码. enctype作用是告知服务器请求正文的MIME类型(请求消息头content-type的作用一样) 1. ...
- Ubuntu开放指定端口
一般情况下,ubuntu安装好的时候,iptables会被安装上,如果没有的话那就安装上吧 安装 在终端输入 sudo apt-get install iptables 添加规则 在终端输入 ipta ...
- Linux命令集锦：ansible命令
ansible 命令主要用于批量管理,来实现自动化管理.常用批量操作包括:主机分组管理.实时批量执行命令或脚本.实时批量分发文件或目录.定时同步文件等. 一.安装 ansible yum instal ...
- kNN进邻算法
一.算法概述 (1)采用测量不同特征值之间的距离方法进行分类 优点: 精度高.对异常值不敏感.无数据输入假定. 缺点: 计算复杂度高.空间复杂度高. (2)KNN模型的三个要素 kNN算法模型实际上就 ...
- centos超详细搭建jumpserver跳板机
一.官网 https://docs.jumpserver.org/zh/master/ 二.一站式.分布式安装文档 三.选择最新版 四.在线安装文档 五.按文档部署(4G.二核.50G硬盘) 六 ...