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,使得我们 ...
随机推荐
- Material使用09 MdCheckboxModule、MdMenuModule、MdTooltipModule
1 MdCheckboxModule的使用 md-checkbox 实现的功能和 <input type="checkbox"> 相同,只不过 md-checkbo ...
- error C2039: “addTextureMesh”: 不是“pcl::visualization::PCLVisualizer”的成员
error C2039: "addTextureMesh": 不是"pcl::visualization::PCLVisualizer"的成员 PCL 1.6 ...
- CodeForces 492E Vanya and Field （思维题）
E. Vanya and Field time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- Java对象在内存中的状态
可达的/可触及的 Java对象呗创建后,如果被一个或者多个变量引用,那就是可达的,即从根节点可以触及到这个对象. 其实就是从根节点扫描,只要这个对象在引用链中,那就是可触及的. 可恢复的 Java对象 ...
- Cactus详细讲解
Cactus建议一年以上有经验的人玩,刚入门MVC,不了解下列组件请先自行学习,切勿好高骛远. Cactus的组成(基于.net4.5.2):Dapper+MVC4+autofac 前端css框架pu ...
- 微信H5支付----报undened index openid
1.检查传过来的订单号是否是恒定不变的 2.检查总价是否为整数(微信要求订单金额是整数).以及不能为0 以下是这次错误的具体原因: 主要是前面读取的金额数据需要读取接口的,而不是数据库的(接口读取的是 ...
- window 环境下在虚拟机上安装php环境
转发:https://www.cnblogs.com/orangegem/p/7191659.html 安装linux工具 :https://blog.csdn.net/z15732621582/ar ...
- [Xcode 实际操作]四、常用控件-(3)UILabel文本标签的使用
目录:[Swift]Xcode实际操作 本文将演示标签控件的基础用法, 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class Vie ...
- shell脚本——循环和函数
1.打印一个等腰三角形 ` ;do -$i]` ;do echo -n ' ' done -]` ;do echo -n '*' done echo done 2.打印99乘法表 #!/bin/bas ...
- SCOJ4427 / TOPOI 4404: Miss Zhao's Graph 解题报告
题目链接 SCOJ TOPOI 题目描述 Problem 给定一个包含n个顶点m条边的带权有向图,找一条边数最多的路径,且路径上的边的权值严格递增.图中可能有重边和自环. Input Data 第一行 ...