Vue(八):监听属性watch
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的更多相关文章
- 9.Vue.js 监听属性
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...
- vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 简单vue的监听属性(单位换算)
单位换算 单位换算可以根据实际情况换 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- vue(七)--监听属性(watch)
1.watch:用来监听每一个属性的变化 2.watch这个对象里面都是函数,函数的名称是data中的属性名称,watch中的函数不需要调用 3.当属性发生改变那么就会触发watch函数,每个函数都会 ...
- 第十一篇:vue.js监听属性(大作业进行时)
这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...
- 怎样使用 Vue 的监听属性 watch ?
需求: 我需要在某个数据变化时能够执行特定的动作, 比如我在输入框中输入数字 88, 系统检测到以后就会弹窗 拜拜 , 而输入其他字符则不会触发, 这种需求简直多入牛毛, 实际上这就是 自定义事件 , ...
- Vue.js 监听属性
demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf- ...
- Vue.js:监听属性
ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...
- vue条件语句、循环语句、计算属性、侦听器监听属性
因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...
- 设计模式(5): vue 不监听绑定的变量
概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...
随机推荐
- P、NP、NPC、NPH问题的区别和联系
时间复杂度 时间复杂度描述了当输入规模变大时,程序运行时间的变化程度,通常使用\(O\)来表示.比如单层循环的时间复杂度为\(O(n)\),也就是说程序运行的时间随着输入规模的增大线性增长,两层循环的 ...
- Scrapy爬虫学习笔记 - windows \ linux下搭建开发环境1
一.pycharm的安装和简单使用 二.mysql和navicat的安装和使用 三.windows和linux下安装pytho ...
- (转)40个Java集合面试问题和答案
Java集合框架为Java编程语言的基础,也是Java面试中很重要的一个知识点.这里,我列出了一些关于Java集合的重要问题和答案. 另外,码农网之前也整理过一篇关于Java集合面试题的文章:大公司最 ...
- python数据分析---第04章 NumPy基础:数组和矢量计算
NumPy(Numerical Python的简称)是Python数值计算最重要的基础包.大多数提供科学计算的包都是用NumPy的数组作为构建基础. NumPy的部分功能如下: ndarray,一个具 ...
- Java中A instanceof B是什么意思?
instanceof用来判断内存中实际对象A是不是B类型 出现这种情况经常是需要强制转换的时候class Dog extends Animal譬如dog定义了自己的方法wangwang Animal ...
- vue中的dom指令控制
一.条件控制指令1.v-if,条件渲染 <div id="J_app"> <p v-if="show">显示该标签</p> ...
- BZOJ.4289.PA2012 Tax(思路 Dijkstra)
题目链接 \(Description\) 给出一个N个点M条边的无向图,经过一个点的代价是进入和离开这个点的两条边的边权的较大值,求从起点1到点N的最小代价.起点的代价是离开起点的边的边权,终点的代价 ...
- netty同时做http和websocket(netty入门)
---恢复内容开始--- http://www.jianshu.com/p/5c29c6c6d28c ---恢复内容结束--- http://www.jianshu.com/p/5c29c6c6d28 ...
- Codeforces Round #411 (Div. 2) 【ABCDE】
A. Fake NP 题意:给你l,r,让你输出[l,r]里面除1以外的,出现因子数量最多的那个数. 题解:如果l==r输出l,否则都输出2 #include<bits/stdc++.h> ...
- Ping监控脚本
需求 内网服务器之间高频率检验延时信息, 脚本特点 多进程,可同时异步监控多个地址,不会互相影响. 使用方式 创建文件夹(可以替换为你自己的,我这里就用我们生产环境的标准目录了) mkdir /dat ...