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,使得我们 ...
随机推荐
- 怎么查看Eclipse的版本信息
工具/原料 Eclipse版本信息查看 第一种方法 1 找到Eclipse的解压目录就是你的Eclipse.exe 所在的目录 2 找到 .eclipseproduct 文件双击打开 3 如图 ...
- VS2010和VS2015的Dll项目
最近在使用公司VS2010开发的老的项目时,发现一些问题 公司用VS2010开发了一个项目,生成 GUS_TestIdentity.dll, 放在 C:\Windows\assembly 中 当在另一 ...
- Linux进程KILL不掉的原因
做过Linux开发的人通常遇到过一个进程不能kill掉的情况,即使使用的是kill -9方式,而一般的教课书都只说kill -9能杀死任何进程,遇到这种情况时就会感觉到很矛盾,其它这也是正常的,通常有 ...
- 基本图形的绘制（基于skimage）
图形包括线条.圆形.椭圆形.多边形等.在skimage包中,绘制图形用的是draw模块,不要和绘制图像搞混了. 一 线条 函数调用格式: skimage.draw.line(r1,c1,r2 ...
- How to download a file with plus symbol(+) filename in IIS?
How to download a file with plus symbol(+) filename in IIS? Original post link:https://www.cnblogs.c ...
- BadBoy录制模式：Request 和 Navigation比较
[前言] 今天来为大家介绍下BadBoy录制模式: Request 和 Navigation的比较! 如果您的电脑还未安装BadBoy这款工具的话,可以参考下BadBoy安装步骤和简单介绍:http: ...
- iOS常用设计模式——工厂方法（简单工厂模式，工厂方法模式， 抽象工厂模式）
1. 简单工厂模式 如何理解简单工厂,工厂方法, 抽象工厂三种设计模式? 简单工厂方法包含:父类拥有共同基础接口,具体子类实现子类特殊功能,工厂类根据参数区分创建不同子类实例.该场景对应的UML图如下 ...
- C 语言实例 - 创建各类三角形图案
C 语言实例 - 创建各类三角形图案 创建三角形图案. 实例 - 使用 * 号 #include <stdio.h> int main() { int i, j, rows; printf ...
- JS滑动下划线导航菜单实现原理
效果如下:http://campus.51job.com/test/zengxl/js html: <div class="mainnav"> <div clas ...
- 1100 Mars Numbers（20 分）
People on Mars count their numbers with base 13: Zero on Earth is called "tret" on Mars. T ...