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,使得我们 ...
随机推荐
- linux docket
什么是 Docker Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目,它是基于 dotCloud 公司多年云服务技术的一次革新,并于 ...
- Windows命令快捷打开
Win+R或者在搜索中输入: control -- 控制面板 mstsc -- 远程连接 SnippingTool -- 截图工具
- R语言 arules包 apriori()函数中文帮助文档(中英文对照)
apriori(arules) apriori()所属R语言包:arules Mining Associations w ...
- PAM认证
PAM认证 摘自: http://www.cnblogs.com/shenxm/p/8451889.html PAM(Pluggable Authentication Modules) Sun公司于1 ...
- 想以编程为职业，现在正在看毕向东的java基础，接下来应该看什么视频，求前辈们指教。
想以编程为职业,现在正在看毕向东的java基础,接下来应该看什么视频,求前辈们指教. https://zhidao.baidu.com/question/1368482680246425699.htm ...
- vue.js基础学习（1）
一:v-cloak:解决浏览器闪烁,编译过程中不会显示,直到编译结束才显示. 用法:[v-cloak] { display: none;} <div v-cloak> {{ message ...
- Thinkphp的import使用方法
Thinkphp的import使用方法主要有以下4种,在此记下以供查询.原文链接:http://www.jb51.net/article/51765.htm 感谢. 1.用法一 import( ...
- 【转】lucene4.3.0 配置与调试
lucene4.3.0 配置与调试 demo lucene的最新版本是4.3.0, http://www.apache.org/dyn/closer.cgi/lucene/java/4.3.0 luc ...
- MySQL（进阶）
视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( SEL ...
- MySQL主从配置实战笔记
其实网上已经有关于MySQL主从复制的很丰富全面的资料了,这里写点东西主要是为了给自己加深印象. 复制原理 MySQL主从复制是内建的非常强大的功能,主要应用于数据备份,负载均衡等方面.因为配置相对比 ...