zoukankan      html  css  js  c++  java
  • vue的计算属性与侦听属性

    vue的计算属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue.js"></script>
    </head>
    <body>
    <div id="app">
        <p>{{price}}</p>
        <p>{{price1}}</p>
    </div>
    </body>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                price:23.9999,
                },
            //计算属性,当我们要对data的属性进行调整为另一个变量,留作为其他地方进行运算使用时,可以使用计算属性得出另一个变量
            computed:{
                price1:function (){
                    return this.price.toFixed(2)
                }
            }
        })
    </script>
    </html>
    

    vue的侦听属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue.js"></script>
    </head>
    <body>
    <div id="app">
        数量: <input type="text" v-model="num">
        单价: <input type="text" v-model="price">
        总价: <input type="text" v-model="total">
    </div>
    </body>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                price:23.9,
                num:1,
                total:0
                },
            //侦听属性:当数据发生变化时执行,并告诉其他地方要做啥
            watch:{
                num: function (oldvalue,newvalue) {
                    console.log(num=newvalue)  //1
                    console.log(num=oldvalue)  //0
                    this.total = this.num*this.price
                },
                price:function () {
                    this.total = this.num*this.price
                }
            }
    
        })
    </script>
    </html>
    
  • 相关阅读:
    3年A班,从现在起大家都是人质-观后感
    深入浅出的Object.defineProperty()
    在Vue中使用插槽(solt)
    非父子组件间的传值
    给组件绑定原生事件
    组件参数校验与非props特性
    Vue父子组件的数据传递
    Vue组件使用中的细节点
    vue中set基本用法
    vue中的列表渲染
  • 原文地址:https://www.cnblogs.com/maqian/p/13662563.html
Copyright © 2011-2022 走看看