专栏首页达达前端(8)打鸡儿教你Vue.js

(8)打鸡儿教你Vue.js

监听属性

监听属性 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;
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • PHP全栈学习笔记19

    了解什么是thinkphp概述,thinkphp项目目录结构,thinkphp的控制器,视图,thinkphp项目构建流程,thinkphp配置,thinkph...

    达达前端
  • 【一起来烧脑】读懂JQuery知识体系

    在现在就业的过程中,会运用JQuery是你的加分项,那么什么是JQuery,嗯,jquery是JavaScript的函数库,是一种轻量级的JavaScript库...

    达达前端
  • PHP全栈学习笔记7

    图形图像处理技术,gd库的强大支持,PHP的图像可以是PHP的强项,PHP图形化类库,jpgraph是一款非常好用的强大的图形处理工具。

    达达前端
  • 僵尸网络 Stantinko 犯罪活动新增加密货币挖矿

    ESET 研究人员发现,Stantinko 僵尸网络背后的犯罪分子正在向他们控制的肉鸡分发加密货币挖矿模块。

    madneal
  • bootstrap table table-striped 交替颜色

    <table class="table table-striped"> <tr><th>aaaa</th><th>bbbbb</th><th>ccccc</t...

    用户5760343
  • bootstrap table table-hover 鼠标悬停变换颜色

    <table class="table table-striped table-bordered table-hover"> <tr><th>aaaa</th...

    用户5760343
  • [Python]写给Dr.Wu的简单爬虫例子

    这次要爬的数据来自网站:http://www.qlaee.com/zhuanlist.jsp?flag=3&p=1&columnumber=302&codemy...

    wOw
  • bootstrap table table-stripted table-bordered 边框

    <table class="table table-striped table-bordered"> <tr><th>aaaa</th><th>bbbbb</...

    用户5760343
  • Java单体应用 - 常用框架 - 01.Bootstrap - 表格

    原文地址:http://www.work100.net/training/monolithic-frameworks-bootstrap-table.html

    光束云
  • 006android初级篇之jni数据类型映射

    JNI是Java Native Interface的缩写,它提供了若干的API实现了Java和其他语言的通信(主要是C&C++)

    上善若水.夏

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动