【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 ...
随机推荐
- Ubuntu 配置ISCSI服务
摘要:sudo apt-get install iscsitarget立刻搞定, 然后编辑配置文件:sudovim/etc/ietd.conf默认的配置文件, 有详细的配置说明和示例,本博先备份了事, ...
- 解决“mysql不是内部/外部命令，也不是可执行程序，也不是批处理文件”
解决方案: 1.切换到mysql.exe文件所在目录: 2.将mysql.exe文件所在目录添加到操作系统内的环境变量中: 如何添加环境变量: 1.右击“我的电脑”——>属性——>高级—— ...
- Python接口测试-模块引用与映射
PyCharm中发现模块引用老是有各种问题 可以用映射来解决,例如需要调用登录模块里面的东西的时,可以这样处理: 登录模块:1-login.py import this import requests ...
- 解决Android Studio 升级时提示 Connection failed. Please check your network connection and try again问题
一,问题: 无论mac还是windows可能都会出现这个问题,解决方案大同小异,就是修改VMOptions而已. 解决方案: Windows: 在\Android Studio\bin目录下找到 st ...
- LC 718. Maximum Length of Repeated Subarray
Given two integer arrays A and B, return the maximum length of an subarray that appears in both arra ...
- vue 动态组件，传递参数
<template> <div class="top"> <div class='nav'> <ul class='navHader'&g ...
- python中requests.session的妙用
在进行接口测试的时候,我们会调用多个接口发出多个请求,在这些请求中有时候需要保持一些共用的数据,例如cookies信息. 1.requests库的session对象能够帮我们跨请求保持某些参数,也会在 ...
- Shell脚本中判断字符串是否被包含在内
1.字段 grep:案例: str1="abcdefgh"str2="def"result=$(echo $str1 | grep "${str2}& ...
- 你应该知道的 MySQL 的锁
背景 数据库的锁是在多线程高并发的情况下用来保证数据稳定性和一致性的一种机制.MySQL 根据底层存储引擎的不同,锁的支持粒度和实现机制也不同.MyISAM 只支持表锁,InnoDB 支持行锁和表锁. ...
- LVS系列一、LVS集群-NAT模式
一. 集群概述 1. 什么是集群? 一组各自相互独立且又相互依赖的,通过高速网络互联的计算机组成的一个计算机组, 以单一的系统模式加以管理, 为用户提供服务, 对用户来说, 用户只会认为对方是一个服务 ...