慕雪0459911
慕虎2584893
应该是data里面有没有定义msg1的初始化
ienoon
楼上正解,3.0的语法已经发生了变化。不能new vue了,需要使用createApp:https://v3.vuejs.org/guide/introduction.html#declarative-rendering
hongli
官方的例子也写的非常的清楚,https://cn.vuejs.org/v2/guide/computed.html
computed更适合Vue中的多个变量需要同时监听的场景:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
慕田峪9554188
问题解决了,但是特别奇怪的一点,我自己敲的代码不能变化,但是复制了一模一样的代码,就能显示了。。。
qq_色狼_iqAJM9
这个由于this作用域的问题,你的代码中的this.arr的this代表着是当前的Vue实例,所以是undefined,你换成arr,去掉this. 试试?
攻城师4041149

完全没有问题啊,同学!!!
慕标1446865
行吧抱歉..我刚刚拷贝有问题了, 重新发一下...
<!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>Document</title>
<style>
.bg{
color: red;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<div class="bg" id="app">
{{msg}}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'hello vue!'
},
watch:{
msg: function(newval,oldvalue){
console.log('newvalue is : ' + newval)
console.log('oldvalue is : ' + oldvalue)
}
},
computed: {
},
})
</script>
</html>
樊凯蹦
监听用户输入的内容,不允许的直接删除掉对应的字符。个人理解
梦游操作手
实例化外面定义的变量 只要在computed监听的实例化对象内出现 并 触动computed监听的事件,就会监听出改变,否则,监听不出变化。
weixin_慕移动628190
巨人的肩膀给的
qq_天会亮心会暧_0
你可以在全局变量变化的时候,也修改一个局部变量(此变量不做展示及其它使用),以达到更新computed监听的效果。
weixin_慕盖茨1587514
建议参考官方文档:计算属性和侦听器
蟹蟹肉
你的vue的版本引用有问题,请参考我们之前的课程的介绍,正确的引入 vue2.x的版本。
weixin_慕设计6406535
可以的
qq_珍惜青春_0
楼上的同学正解,vue的computed计算属性,会监听自己所管理的data中的属性的变化,而在自己管理以外的变量的变化是不会去监听的。
参考 :计算属性和侦听器
xiaobao100
计算属性,相当于是一个监听多个变量而得来的变量值,这个变量值是可以直接在页面上进行引用的。
谢谢您的关注。
qq_瓶子_21
@Miss喵 正解,因为watch方法是监听了msg这个变量的变化。所以,在console窗口中,使用app.msg = '一个你想要改变的值',回车,你就会看到console出来的结果啦。
MSli
举个最简单的例子,watch里面监听了data里面的单一变量的变化,而computed可以监听多个本vue实例里面data变量的变化。从我们的视频例子里面可以看出来!!
PS: 如果有一个全局,非vue实例里面的变量发生了变化,是不会触发computed计算属性的。