vue名称案例、名字案例

最新推荐文章于 2024-10-04 00:46:18 发布

娇花*

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量40

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/mgaga/article/details/127660590

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id='app'>
        <input type="text" v-model="firstname">+
        <input type="text" v-model="lastname"><button @getName="getName">=</button>
        <input type="text" v-model="name">
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                firstname: '',
                lastname: '',
                // name: '',
                obj: {
                    name: ''
                }

            },
            methods: {
                getName() {
                    // this.name = this.firstname + '-' + this.lastname
                }

            },
            // 监听事件
            watch: {
                // firstname:function(val){
                //     console.log(val);
                //     this.name = this.firstname + '-' + this.lastname
                // },
                'obj.name': {
                    // 深度监听
                    deep: true
                },
                firstname: {
                    handler(newVal, oldVal) {
                        console.log(newVal);
                    },
                    immediate: true,
                    deep: true
                },
                lastname: function (val) {
                    // console.log(val);
                    // this.name = this.firstname + '-' + this.lastname
                }
            },
            // 计算事件
            computed: {
                // 计算属性“name”已在数据中定义。 不能在data中定义
                // 第一种方法
                // name(){
                //     return this.firstname+'-'+ this.lastname
                // }
                name: {
                    // 第二种
                    get() {
                        // return this.firstname+'-'+ this.lastname
                    },
                    // 第三种
                    set(val) {
                        console.log(val.split('-'));
                        if (val.split('-').length == 2) {
                            this.firstname = val.split('-')[0]
                            this.lastname = val.split('-')[1]
                        }
                    }
                }
            },
            beforeUpdate() {
                // this.name = this.firstname + '-' + this.lastname
            }

        })
    </script>
</body>

</html>