在模板中放入太多的逻辑,会使代码不容易维护,所以,对于复杂的逻辑,应该使用计算属性,计算属性写在computed中

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{ myMsg }}</p>
    <button @click="clickHandler">修改</button>
</div>

<script src="../vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:"liang",
                age:18
            }
        },
        methods:{
            clickHandler(){
                this.msg = "sun";
                this.age = 20;
            },
            clickHandler:function () {
                console.log(this)
            }
        },
        computed:{
            myMsg:function () {
                return `我的名字叫${this.msg},年龄是${this.age}`;
            }
        }
    })
</script>
</body>
</html>
View Code