美文网首页
2023-01-02_Vue属性监听器

2023-01-02_Vue属性监听器

作者: 微笑碧落 | 来源:发表于2023-01-01 11:38 被阅读0次

前言

  • vue的属性监听器和计算属性在功能上都很类型,都是根据普通属性实现一部分计算。
  • 采用属性监听器的原因是直观,且可以很方便的知道属性变化前后的值

1. 属性监听器的使用

  • 如下,定义组件的时候,watch下就是属性监听器,普通属性有变化的时候,这个监听器就会被调用。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue3 Demo</title>
    </head>
    <body>
        <div style="text-align: center;" id="App">
            <input v-model="searchText"/>
        </div>

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

        <script>
            const App = {
                data(){
                    return {
                        searchText : "",
                    }
                },
                methods: {
                },
                watch: {
                    searchText(oldValue, newValue){
                        if(oldValue.length > 10){
                            console.log("文本太长了")
                        }
                    }
                }
            }
            let inst = Vue.createApp(App).mount("#App");
        </script>
    </body>
</html>

相关文章

网友评论

      本文标题:2023-01-02_Vue属性监听器

      本文链接:https://www.haomeiwen.com/subject/ebrccdtx.html