computed传递参数

想要从页面传递参数进computed计算属性，方法和methods传递参数不太一样，需要在computed中的函数中return一个function，在这个function中接受传递过来的参数，然后计算返回。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{demoData("maple story")}}</h2>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
        },
        methods:{
        },
        computed:{
            demoData(){
                return function(e){
                    return e+"好玩不花钱"
                }
            },
        }
    })
</script>

第12行接收参数，和methods方法接收参数用法一样
24-28行现在属性内return一个函数，然后在这个函数中接收参数，进行拼接操作。

watch监听属性

用来监听某个标签内容发生变化，响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。例如用在网络中的异步请求。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>单价:{{price}}</div>
        <input type="text" v-model="num">
        <h1>总价:{{sumPrice}}</h1>
        <h2>总价:{{sumPrice}}</h2>
        <h3>总价:{{sumPrice}}</h3>

        <h2>{{demoData("maple story")}}</h2>

        <input type="text" v-model="myName">
        <h1>{{myName}}</h1>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            num:1,
            price:99,
            myName:""
        },
        methods:{
            // totalPrice(){
            //     console.log("函数被调用")
            //     return this.price*this.num
            // }
        },
        computed:{
            demoData(){
                return function(e){
                    return e+"好玩不花钱"
                }
            },
            sumPrice(){
                console.log("函数被调用")
                return this.price*this.num
            }
        },
        watch:{
            myName(val){
                console.log(val)
            }
        }
    })
</script>