vue计算属性

---

HTML代码：

---

<div id="app1">
    zhi01: <input type="text" v-model="zhi01"/> <br/>
    zhi02: <input type="text" v-model="zhi02"/> <br/>
    zhi03: <input type="text" v-model="zhi03"/> <br/>
    zhi04: {{zhi04}} <br/>
</div>

---

 Vue代码：

<script>
    const vm1 = new Vue({
        el: "#app1",
        data: {
            zhi01: "hunk",
            zhi02: "xu"
        },

        computed: {
            //计算属性的get和set的写法
            zhi03: {
                get() {
                    return this.zhi01 + "   -   " + this.zhi02;
                },
                set(val) {
                    var hhh = val.split(":");
                    this.zhi01 = hhh[0];
                    this.zhi02 = hhh[1]
                }
            },
            //计算属性的另一个写法
            zhi04() {
                return this.zhi01 + "   -   " + this.zhi02;
            }
        }
    });
</script>

 

FR：徐海涛（hunk Xu)
QQ技术交流群：386476712