Vue-watch选项

Vue ----watch 选项

用于监听数据变化：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <div id="demo">
11         <h2>Vue-watch选项</h2>
12     <div>
13         <p>室外温度：{{tem}} `C</p>
14         <p>穿衣建议: {{dress}}</p>
15         <p><button @click="add(4)" >增加</button><button @click="reduce(4)">减少</button></p>
16     </div>
17     </div>
18 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
19 <script>
20     var dressList=["T恤","衬衫","羽绒服"];  //手动添加数据
21     var app=new Vue({
22         el:"#demo",
23         data: {
24             tem:16,
25             dress:"衬衫"
26         },
27         created () {
28
29         },
30         methods: {
31             add:function(num){
32             this.tem +=num;
33             },
34             reduce:function(num){
35             this.tem -=num;
36             }
37         },
38         watch:{
39             tem:function(newValue,oldValue){
40                 if(newValue >= 20){
41                     this.dress=dressList[0]
42                 }else if(newValue < 20 && newValue > 0){
43                     this.dress =dressList[1];
44                 }else if(newValue <=0){
45                     this.dress =dressList[2];
46                 }
47             }
48         }
49     });
50 　　60 </script>
61
62 <style lang="scss">
63 #demo {
64
65 }
66 </style>
67
68 </body>
69 </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];}})

转载于:https://www.cnblogs.com/coffer/p/10286229.html

Vue-watch选项相关推荐

vue中选项和url根据彼此的改变实现高亮显示
vue中选项和url根据彼此的改变实现高亮显示主要时声明式导航标签中的activeClass属性起的作用,tag属性的作用是转为指定的标签 demo 当url改变时,选项变色:选择选项时,选项也变色
Vue组件选项props
前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
Vue——watch选项详解
1. 什么是watch选项?(官方解释) 类型:{ [key: string]: string | Function | Object | Array } 详细:一个对象,键是需要观察的表达式,值是对 ...
配置 Vue 实例（选项）
文章目录一.总览二.DOM 2.1 el && template 选项 2.2 render 选项 2.3 renderError 选项三.数据 3.1 data 选项 3.2 ...
vue组件获取props_Vue组件选项props
前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
vue vuex 挂载_Vue $mount()手动挂载
//$mount()手动挂载 // 1 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: //假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载.例如: new Vue ...
vue调试工具如何使用_教你使用Vue.js的DevTools来调试vue项目
Vue DevTools项目的官方主页位于GitHub上:https://http://github.com/vuejs/vue-devtools.你可以找到安装说明,帮助解决一些问题等等.目前该扩展 ...
Vue.js用法详解（一）更新中~
前言前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: Vue.js ...
【Vue.js 牛刀小试】：第九章 - 组件基础再探（data、props）
系列目录地址一.基础知识概览第一章 - 一些基础概念(posted at 2018-10-31) 第二章 - 常见的指令的使用(posted at 2018-11-01) 第三章 - 事件修饰符的 ...
01Vue.js快速入门(一)Vue概念及Helloworld
1.1. Vue简介 Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view].新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue的单文件组件开发方 ...

Vue-watch选项

Vue-watch选项相关推荐

最新文章

热门文章