薛乎乎~ 2024-10-19 14:32 采纳率: 81%
浏览 2
已结题

通过vue使用watch监听器实现输出“我叫什么，来自XX城市。“

通过vue使用watch监听器实现输出“我叫什么，来自XX城市。“


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p v-html="people(newValue)"></p>
    </div>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                people:{name:'xiaoming',
                city:'chaoyang'}
            },
            watch:{
                deep:true,
                people(newValue){ 
                    console.log( ` 我是${this.name}，来自${this.city}`)
                },
                
            },
            computed:{
                people1(value){
                    
                    console("变化了")
                }
            }
        })

    </script>
</body>
</html>

```

  • 写回答

1条回答 默认 最新

  • 无疆76 2024-10-19 14:33
    关注

    以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

    您的代码有一些问题需要解决。首先，watch用于监听Vue实例中的特定数据变化，然后在这些数据发生变化时运行特定的函数。在您提供的代码中，watch是用于监听people对象的变化，但您可能想要分别监听name和city的变化。此外，您需要在控制台打印输出信息，而不是使用v-html指令来显示一个段落元素的内容。下面是一个修改后的代码示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Watch Example</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 这里只是作为一个占位符，因为我们主要通过控制台输出信息 -->
        <p>{{ message }}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                name: 'xiaoming', // 直接使用name属性而不是people对象中的name属性
                city: 'chaoyang' // 同上
            },
            watch: { // 使用watch监听name和city属性的变化
                name(newValue) { 
                    console.log(`我叫${newValue}，来自${this.city}`); // 当name变化时打印输出信息到控制台
                },
                city(newValue) { 
                    console.log(`我来自${newValue}，我的名字是${this.name}`); // 当city变化时打印输出信息到控制台
                }
            },
            computed: { // 如果需要，可以定义计算属性来根据name和city生成一个展示信息，但这不是必需的，因为您主要关注控制台输出。
                message() { // 这里只是一个简单的计算属性示例，用于在页面中显示一条消息。它并不直接影响watch的行为。
                    return `我叫${this.name}，来自${this.city}`; // 这个信息仅显示在浏览器中而不会触发控制台输出。              }         } 
        });  </script> 
</body> 
</html> 
``` 这是一个简单的Vue应用示例，通过`watch`监听器来监视`name`和`city`属性的变化，并在控制台中输出相应的信息。注意，这个例子中的计算属性`message()`仅用于在页面中显示一条消息，它并不会触发控制台输出或影响`watch`的行为。
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 10月27日
  • 已采纳回答 10月19日
  • 创建了问题 10月19日