监听属性 watch
通过 watch 来响应数据的变化
- <div id = "app">
- <p style = "font-size:25px;"> 计数器: {{ counter }}</p>
- <button @click = "counter++" style = "font-size:25px;"> 点我 </button>
- </div>
- <script type = "text/javascript">
- var vm = new vue({
- el: '#app',
- data: {
- counter: 1
- }
- });
- vm.$watch('counter', function(nval, oval) {
- alert('计数器值的变化 :' + oval + '变为' + nval + '!');
- });
- </script>
- <div id = "computed_props">
- 千米 : <input type = "text" v-model = "kilometers">
- 米 : <input type = "text" v-model = "meters">
- </div>
- <p id="info"></p>
- <script type = "text/javascript">
- var vm = new Vue({
- el: '#computed_props',
- data: {
- kilometers : 0,
- meters:0
- },
- methods: {
- },
- computed :{
- },
- watch : {
- kilometers:function(val) {
- this.kilometers = val;
- this.meters = this.kilometers * 1000
- },
- meters : function (val) {
- this.kilometers = val/ 1000;
- this.meters = val;
- }
- }
- });
- // $watch 是一个实例方法
- vm.$watch('kilometers', function (newValue, oldValue) {
- // 这个回调将在 vm.kilometers 改变后调用
- document.getElementById ("info").innerhtml = "修改前值为:" + oldValue + ", 修改后值为:" + newValue;
- })
- </script>
image.PNG
- <div id="app">
- <table>
- <tr>
- <th > 序号 </th>
- <th > 商品名称 </th>
- <th > 商品价格 </th>
- <th > 购买数量 </th>
- <th > 操作 </th>
- </tr>
- <tr v-for="iphone in Ip_Json">
- <td>{{ iPhone.id }}</td>
- <td>{{ iPhone.name }}</td>
- <td>{{ iPhone.price }}</td>
- <td>
- <button v-bind:disabled="iphone.count === 0" v-on:click="iphone.count-=1">-</button>
- {{ iPhone.count }}
- <button v-on:click="iphone.count+=1">+</button>
- </td>
- <td>
- <button v-on:click="iphone.count=0"> 移除 </button>
- </td>
- </tr>
- </table>
总价:${{totalPrice()}}
- </div>
- table {
- border: 1px solid black;
- }
- table {
- width: 100%;
- }
- th {
- height: 50px;
- }
- th, td {
- border-bottom: 1px solid #ddd;
- }
- {{totalPrice()}}
- methods:{
- totalPrice : function(){
- var totalP = 0;
- for (var i = 0,len = this.Ip_Json.length;i<len;i++) {
- totalP+=this.Ip_Json[i].price*this.Ip_Json[i].count;
- }
- return totalP;
- }
- }
请点赞! 因为你的鼓励是我写作的最大动力!
官方微信公众号
吹逼交流群: 711613774
吹逼交流群
来源: http://www.jianshu.com/p/ced0977af423