Vue.js 可以通过 watch 来响应数据的变化。

以下实例模拟购物车里商品数量增加,对应价格也增加

       <!--模拟购物车商品数量增加,价格也随之增加-->
<div id = "app"> <h3>Search Goods</h3>
<input type='goodsname' v-model="goodsname" />
<br><br>
<table border=1>
<tr>
<th>goodsname</th>
<th>spnums</th>
</tr>
<tr>
<td>{{goodsname}}</td>
<td>{{spnums}}</td>
</tr>
</table> <hr> <p style="color:red">{{msg}}</p> <h3>Shopping Cart</h3>
<p>apple: {{ num }} </p>
<p>price: {{ price }}</p>
<button @click = "num++" >add apple num</button>
</div>
<script type = "text/javascript">
var randomnum = Math.floor(Math.random()*100);
var vm = new Vue({
el: '#app',
data: {
num: randomnum,
price:156,
msg:'',
goodsname:'',
spnums:randomnum
},
watch:{
goodsname:function(val){
if(val=='a' || val=='ap' || val=='app' || val=='appl'
|| val=='apple'){
this.goodsname='apple';
}else{
alert('no result!');
}
}
}
});
      // $watch是一个实例方法
vm.$watch('num', function(nval, oval) {
this.spnums--;
this.msg="cart apple num add,from "+oval+" to "+nval+",so price change to "+(this.price+=10)
});
</script>

Vue(八):监听属性watch的更多相关文章

  1. 9.Vue.js 监听属性

    本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...

  2. vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 简单vue的监听属性(单位换算)

    单位换算 单位换算可以根据实际情况换 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  4. vue(七)--监听属性(watch)

    1.watch:用来监听每一个属性的变化 2.watch这个对象里面都是函数,函数的名称是data中的属性名称,watch中的函数不需要调用 3.当属性发生改变那么就会触发watch函数,每个函数都会 ...

  5. 第十一篇:vue.js监听属性(大作业进行时)

    这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...

  6. 怎样使用 Vue 的监听属性 watch ?

    需求: 我需要在某个数据变化时能够执行特定的动作, 比如我在输入框中输入数字 88, 系统检测到以后就会弹窗 拜拜 , 而输入其他字符则不会触发, 这种需求简直多入牛毛, 实际上这就是 自定义事件 , ...

  7. Vue.js 监听属性

    demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf- ...

  8. Vue.js:监听属性

    ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...

  9. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

  10. 设计模式(5): vue 不监听绑定的变量

    概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...

随机推荐

  1. java爬虫抓取腾讯漫画评论

    package com.eteclab.wodm.utils; import java.io.BufferedWriter; import java.io.File; import java.io.F ...

  2. Dart语言特性必备了解!

    学习Dart语言,必须将以下的概念熟记于心: 在dart语言中,一切皆为对象.所有的对象都是一个类的实例.甚至整数.函数.null也看做是对象.所有的对象都继承于Object类 尽管Dart是强类型语 ...

  3. FutureTask实现超时任务

    最近主要在弄一些c/s的东西,以及对接一些外部的接口. 记下一些感觉有用的东西吧. java在1.5之后有Callable和Future可以获得任务执行完毕后的结果 结合ExecutorService ...

  4. flask第九篇——url_for【2】

      上一节说的是没有参数的url_for,如果没有参数,可以直接url_for('函数名')那如果我们构造的函数是: @app.route('/login/<page_id>/')def ...

  5. Cordova项目config.xml添加android权限

    最近在开发cordova项目,安卓APP需要调用照相机和系统相册,在添加安卓权限的时候,总是报错. 以下是部分config.xml代码 <platform name="android& ...

  6. BZOJ.2639.矩形计算(二维莫队)

    题目链接 二维莫队,按x,y坐标一起分块.(x,y)的所属的块为 x/sq(n)*sq(m) + y/sq(m) 排序时按照(左下点所在块,右上点的标号)排序 排序后 先得出一个询问的答案,然后利用上 ...

  7. 潭州课堂25班:Ph201805201 python 模块json,os 第六课 (课堂笔记)

    json 模块 import json data = { 'name':'aa', 'age':18, 'lis':[1,3,4], 'tupe':(4,5,6), 'None':None } j = ...

  8. history.pushState无刷新改变url

    通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...

  9. Java中的ReentrantLock和synchronized两种锁定

    原文:http://www.ibm.com/developerworks/cn/java/j-jtp10264/index.html 多线程和并发性并不是什么新内容,但是 Java 语言设计中的创新之 ...

  10. android:碎片的使用方式

    介绍了这么多抽象的东西,也是时候应该学习一下碎片的具体用法了.你已经知道,碎 片通常都是在平板开发中才会使用的,因此我们首先要做的就是新建一个平板电脑的模拟 器.由于 4.0 系统的平板模拟器好像存在 ...