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,使得我们 ...
随机推荐
- 6、RNA-Seq Analysis Pipeline
Created by Dhivya Arasappan, last modified by Dennis C Wylie on Nov 08, 2015 This pipeline uses an a ...
- N72烧写
1.打开MFGTOOL.exe烧写工具:上电之前,先短接左下脚,当查看到MFGTOOL工具扫描到工具之后,点击开始,过2分钟左右烧写完成:完成之后电源要拔插以下!! 2.利用---生产工具V1.3 2 ...
- DataSet,DataTable,DataColumn,DataRow的常用操作
DataSet 这个玩意没什么好讲的,当ado.net查询出有多张表集合的数据返回时,这个时候就会使用到DataSet. DataTable //表之间直接赋值 dt2=dt1; 两者指向同一内存空间 ...
- GTK+学习笔记（一）
你将学到什么 如何实现弹出式菜单 菜单简介 菜单(GtkMenu)由菜单项(GtkMenuItem)构成,菜单项可以是任意构件比如按钮.菜单(子菜单) 菜单项的管理 菜单外壳(GtkMenuShell ...
- Linux命令使用
命令行创建设置用户密码 $ sudo useradd -m -r username $ cat "username:password" | sudo chpasswd -m 查询u ...
- BK Componet Monitor
Apache a) 启动服务前将监听地址改成0.0.0.0 b) 确认在文件“/etc/httpd/conf.modules.d/00-base.conf“中有加载mod_status模块 c) 新建 ...
- [CentOS7] 设备与文件名对应表
- Spring基本原理模拟(IoC部分)
package ioc; import java.io.File; import java.lang.reflect.Method; import java.util.Collections; imp ...
- 洛谷P1979 华容道（70分 暴力）
P1979 华容道 题目描述 [问题描述] 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面, 华容道是否根本就无法完成,如果能完成, 最少 ...
- 洛谷P2380 狗哥采矿
P2380 狗哥采矿 题目背景 又是一节平静的语文课 狗哥闲来无事,出来了这么一道题 题目描述 一个n*m的矩阵中,每个格子内有两种矿yeyenum和bloggium,并且知道它们在每个格子内的数量是 ...