13.Vue学习-计算属性小案例和侦听事件

微风

2021 年 02 月 22 日

2235 次浏览

1 条评论

1545字数

Vue

1.一个计算属性的小案例和侦听事件

1.1 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性小案例</title>
</head>
<body>
  

    <div id="app">
        <div>单价:{{price}}</div>
        <input type="text" v-model="num" >
        <h1>总价: {{comNum}}</h1>
        <h3>总价: {{comNum}}</h3>
        <p>总价: {{comNum}}</p>

        <h2>
            <!-- 计算属性传递参数 -->
            {{demoData("vue学习")}}
        </h2>

        <hr>

        <input type="text" v-model="myName">
        <h1>{{myName}}</h1>


    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                num: 1,
                price: 99,
                myName: ""
            },
            methods: {
                // sum(){
                //     //如果数值改变，该方法会被调用三次
                //     console.log("被调用啦");
                //     return this.num * this.price
                // }
            },
            computed: {
                comNum(){
                    console.log("被调用啦");
                    return this.num * this.price
                },
                demoData(){
                    return function(e){
                        return e+"web前端开发"
                    }
                }
            },
            //监听属性(监听数据的改变的)
            //如果数据改变，函数就会被激活
            watch: {
                //val最新的值
                myName(val) { //监听data中的属性的
                    console.log(val)
                }
            }
        })
    </script>
  
</body>
</html>