vue-其他计算属性2.html

原创

虾米大王 2023-06-03 00:06:58 ©著作权

文章标签 javascript vue.js 前端 html Vue 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者虾米大王的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        title:<input type="text" v-model="title">
        name: <input type="text" v-model="name">
        <input type="button" value="修改计算属性" @click="changeName">
    </div>

    <script src="../js/vue.js"></script>

    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                title:'美人剑',
                name:'黄金殿'
            },
            methods:{
                changeName(){
                    this.fullName = '方可贵-名满天下';
                }
            },
            computed:{
                'fullName':{
                    get:function () {
                        return this.title + '-' + this.name;
                    },
                    set:function (newValue) {
                        var parts = newValue.split('-');
                        this.title = parts[0];
                        this.name = parts[1];
                    }
                }
            }
        })
    </script>
</body>
</html>