Vue中JavaScript的运用与computed和watch的对比

    <div id="app">
        {{flag?name1:name2}}<br />
        {{message.split("").reverse().join("")}}<br />//将字符串倒转

        <input type="text" v-model="firstName" placeholder="firstName"><br />
        <input type="text" v-model="lastName" placeholder="lastName"><br />
        {{fullName}}<br />
        {{fullNameFn}}
    </div>
    <script type="text/javascript">
        var vue = new Vue({
            el: "#app",
            data: {
                flag:true,
                name1: "张山",
                name2: "里斯",
                message: "三国演义",
                fullName: "",
                firstName: "",
                lastName: ""
            },
            methods: {

            },
            computed: {
                fullNameFn: function () {
                    return this.firstName + " " + this.lastName
                }
            },
            watch:{
                firstName: function (value) {
                    this.fullName = value + " " + this.lastName;
                },
                lastName: function (value) {
                    this.fullName = this.firstName + " " + value;
                }
            }
        })
     </script>

posted @ 2021-06-17 22:12  shui~  阅读(53)  评论(0)    收藏  举报