Skip to content

S
skill_tree_vue

CSDN 技术社区 / skill_tree_vue

通知 5
Star 2
Fork 0
S
skill_tree_vue
提交 5b431092 编写于 作者: Z zhaoshuangshi
浏览文件
操作

1-3最后小节习题优化

上级 fee623a0
显示空白变更内容
内联 并排
Showing with 4 addition and 47 deletion
data/1.Vue初阶/3.Vue实例/6.侦听器/exercises.md
浏览文件 @ 5b431092
# 侦听器 # 侦听器
 <div style="color: pink;font-size:22px;font-weight:700">小常识：</div>
```javascript
<body>
<div id="app">
<!-- {{ message }}<br>
您的银行卡余额为{{b}} -->
<p>请输入你的幸运数字</p>
<input type="text" v-model="num">
<p>{{text}}</p>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: '你好，几何心凉!',
a: 3,
num: '',
text: '',
},
computed: {
b: function () {
return this.a + 1;
}
},
watch: {
num: function (n, o) {
this.text = '你刚才选择了数字' + o + '，，，你现在又选择了' + n + '，，，我认为' + n + '更好'
},
},
})
</script>
```
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/cc8f1a8bee02416aab90c4ee26534dc1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
<br/>
前面我们看到了计算属性的强大，现在为大家介绍另一彪悍——侦听器，小编编写了上面代码，随着我们在输入框中输入数字的变化，文本框下面会出现一段话，而且会甄别出我们刚刚输入的值，以及当前输入的值，所以我们可以看出计算属性可以帮助我们处理一些计算逻辑数据，而侦听器会检测到我们数据的变化，我们就可以完成很多业务逻辑，思考下：他们两者可以互通使用么？
<br>
 <div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div>
下列关于watch的说法不正确的是？<br/><br/> 下列关于watch的说法不正确的是？<br/><br/>
## 答案 ## 答案
watch 不支持异步 watch 不支持异步。
## 选项 ## 选项
### A ### A
watch 不支持缓存，数据改变或者触发重新渲染时，直接会触发相应的操作 watch 不支持缓存，数据改变或者触发重新渲染时，直接会触发相应的操作。
### B ### B
监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据 监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据。
### C ### C
为了监听对象内部值的变化，和复杂类型的数据时使用deep深度监听 为了监听对象内部值的变化，和复杂类型的数据时使用deep深度监听。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或