Vue.js 键盘事件计算computed属性监视watch属性

最新推荐文章于 2024-07-24 10:40:52 发布

大坤...

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量271

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/red_HTML/article/details/127244056

版权

键盘事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 键盘事件 @keydown.enter -->
    <!-- v-model="" 双向绑定 -->
    <div id="root">
        <input type="text" v-model="name" @keydown.enter="show">
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                name: "hello vue"
            },
            methods: {
                show() {
                    alert(this.name)
                }
            },
        })
    </script>
</body>

</html>

计算属性 computed

定义：要用的属性不存在要通过已有的属性计算得来

原理：底层借助了Object.defineproperty方法提供的getter和setter。

get函数什么时候执行

1.初次读取时会执行一次，

2.当依赖的数据发生改变时会被再次调用。

优势：与methods实现相比内部有缓存机制（复用），效率更高调试方便。

备注：

1.计算属性最终会出现在vm上直接读取使用即可。

2.如果计算属性要被修改，那必须写set函数去相应修改，且set中要引起计算时依赖的数据发生改变

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName">
        名：<input type="text" v-model="lastName"><br>
        姓名：<span>{{fullName}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                firstName: "张",
                lastName: "三"
            },
            // computed: {
            //     fullName: {
            //         // 完整写法
            //         get() {
            //             console.log("getee被调用");
            //             return this.firstName + "_" + this.lastName
            //         },
            //         set(value) {
            //             console.log(value);
            //             const arr = value.split('-')
            //             this.firstName = arr[0]
            //             this.lastName = arr[1]
            //         }
            //     }
            // }
            computed: {
                fullName: {
                    // 简写
                    get() {
                        console.log("getee被调用");
                        return this.firstName + "_" + this.lastName
                    }

                }
            }
        })
    </script>
</body>

</html>

监视属性 watch

属性赋值 v-bind

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>今天的天气很{{info}}</h2>
        <button @click="qiehuan">切换天气</button>
    </div>
    <script>
        let vm = new Vue({
            el: "#root",
            data: {
                isHot: true
            },
            //computed 计算
            computed: {
                info() {
                    return this.isHot ? "炎热" : "凉爽"
                }
            },
            // methods 方法
            methods: {
                qiehuan() {
                    // 取反
                    return this.isHot = !this.isHot
                }
            },
            // watch: {
            //     isHot: {
            //         // 默认为true
            //         immediate: true,
            //         handler(a, b) {
            //             console.log("isHot改变了" + a, b);
            //         }
            //     }
            // }
        })
        // 监视事件的状态
        vm.$watch("info", {
            immediate: true,
            // a 刚开是的  b改变之后的
            handler(a, b) {
                // 输出
                console.log("isHot改变了" + a, b);
            }
        })
    </script>
</body>

</html>

深度监视

vue中的watch默认不监测对象内部值的变化（一层）
配置deep:true 可以监测对象内部值的变化（多层）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">

        <head>a的值{{number.a}}</head><br>
        <button @click="sum">深度监视</button>
    </div>
    <script>
        let vm = new Vue({
            el: "#root",
            data: {
                number: {
                    a: 1,
                    b: 2,
                    c: {
                        d: {
                            e: 3
                        }
                    }
                }
            },
            methods: {
                sum() {
                    return this.number.a++
                }
            },
            watch: {
                'number.a': {
                    // 默认为true
                    // immediate: true,
                    handler(a, b) {
                        console.log("isHot改变了" + a, b);
                    }
                },
                number: {
                    // 默认为true
                    // 深度监视
                    deep: true,
                    // 默认运行一次
                    immediate: true,
                    handler(a, b) {
                        console.log("isHot改变了" + a, b);
                    }
                }
            }
        })
        // 监视事件的状态
        // vm.$watch("info", {
        //     immediate: true,
        //     // a 刚开是的  b改变之后的
        //     handler(a, b) {
        //         // 输出
        //         console.log("isHot改变了" + a, b);
        //     }
        // })
    </script>
</body>

</html>

watch 监听功能来拼接字符串案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName">
        名：<input type="text" v-model="lastName">
        <span>{{fullName}}</span>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: "张",
                lastName: "三",
                fullName: "张三"
            },
            watch: {
                firstName(newValue) {
                    this.fullName = newValue + this.lastName
                },
                lastName(lastvalue) {
                    this.fullName = this.firstName + lastvalue
                }
            }
        })
    </script>
</body>

</html>

大坤...

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 键盘事件计算computed属性监视watch属性

2.如果计算属性要被修改，那必须写set函数去相应修改，且set中要引起计算时依赖的数据发生改变。原理：底层借助了Object.defineproperty方法提供的getter和setter。优势：与methods实现相比内部有缓存机制（复用），效率更高调试方便。1.计算属性最终会出现在vm上直接读取使用即可。2.当依赖的数据发生改变时会被再次调用。定义：要用的属性不存在要通过已有的属性计算得来。1.初次读取时会执行一次，get函数什么时候执行。属性赋值 v-bind。
复制链接

扫一扫