Vue-watch选项
Vue ----watch 选项
用于 监听数据变化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="demo">
<h2>Vue-watch选项</h2>
<div>
<p>室外温度：{{tem}} `C</p>
<p>穿衣建议: {{dress}}</p>
<p><button @click="add(4)" >增加</button><button @click="reduce(4)">减少</button></p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var dressList=["T恤","衬衫","羽绒服"]; //手动添加数据
var app=new Vue({
el:"#demo",
data: {
tem:16,
dress:"衬衫"
},
created () { },
methods: {
add:function(num){
this.tem +=num;
},
reduce:function(num){
this.tem -=num;
}
},
watch:{
tem:function(newValue,oldValue){
if(newValue >= 20){
this.dress=dressList[0]
}else if(newValue < 20 && newValue > 0){
this.dress =dressList[1];
}else if(newValue <=0){
this.dress =dressList[2];
}
}
}
});
</script> <style lang="scss">
#demo { }
</style> </body>
</html>
当使用 实例 watch事件
app.$watch('tem',function(newValue,oldValue){
if(newValue >= 20){
this.dress=dressList[0]
}else if(newValue < 20 && newValue > 0){
this.dress =dressList[1];
}else if(newValue <=0){
this.dress =dressList[2];
}
})
Vue-watch选项的更多相关文章
- Vue组件选项props
前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
- 【转存】Vue组件选项props
原帖地址 前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 ...
- vue的选项
这篇是我自己看着方便整理的,请直接看官方api:http://cn.vuejs.org/v2/api/ 数据 data,props,computed 注意,不应该使用箭头函数来定义计算属性函数 (例如 ...
- Vue 构造选项 - 进阶
Directive指令:减少DOM操作的重复 Vue实例/组件用于数据绑定.事件监听.DOM更新 Vue指令主要目的就是原生DOM操作 减少重复 自定义指令 两种声明方式 方法一:声明一个全局指令 V ...
- vue 计算属性 实例选项 生命周期
vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...
- vue单文件组件data选项的函数体获取vue实例对象
因配置的关系,导致 vue的data选项中存在事件.而事件无法获取 vue 的实例对象:项目是单文件形式的,以下代码只是例子 new Vue({ el:..., data:{ a: { onevent ...
- Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- Vue.js说说组件
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
随机推荐
- AES算法的c++实现
该模板无填充操作. 1.AES.h #include<cstdio> #include<cstring> #include<algorithm> #include& ...
- JAVA 框架 / SSM / SSM SPRING+SPING MVC + MYBATIS 三大框架整合详细步骤
http://how2j.cn/k/ssm/ssm-tutorial/1137.html
- IFrame与window对象(contentWindow)
ref:http://blog.csdn.net/dongzhiquan/article/details/5851201 var detialIframe=document.all("det ...
- 10.Redis未授权访问漏洞复现与利用
一.漏洞简介以及危害: 1.什么是redis未授权访问漏洞: Redis 默认情况下,会绑定在 0.0.0.0:6379,如果没有进行采用相关的策略,比如添加防火墙规则避免其他非信任来源 ip 访问等 ...
- 【转】List<T>和ILIst<T>的区别
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace List ...
- 利用css实现鼠标经过元素，下划线由中间向两边展开
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 【leetcode 968. 监控二叉树】解题报告
解题思路: 由于叶子节点一定不要安装监视器,这样才能使总监视器数量比较少,因此需要从下往上进行判断当前节点的状态(共:3种状态): 0: 当前节点安装了监视器 1: 当前节点可观,但没有安装监视器 2 ...
- Spark 官网提到的几点调优
1. 数据序列化 默认使用的是Java自带的序列化机制.优点是可以处理所有实现了java.io.Serializable 的类.但是Java 序列化比较慢. 可以使用Kryo序列化机制,通常比Java ...
- C#中参数值传递和址传递
概论 我认为的形参和实参是这样的,形参是形式上的参量,和"抽象类"的概念差不多,不是实际存在的.不用的时候不占用内存,被调用的时候分配内存,调用结束,释放内存.类似于"抽 ...
- cf873F(xjb+二分)
题目链接:http://codeforces.com/problemset/problem/837/F 题意:给出一个大小为 n 的数组 a 和一个数 k,每次操作后的到一个 a' 数组,a'i 为 ...