《Vue.js从入门到实战》_example_02_05_computed和data中赋值的区别

dpj_1980

于 2020-10-12 23:19:44 发布

阅读量159

点赞数

分类专栏：每日学习文章标签： vue

本文链接：https://blog.csdn.net/dpj_1980/article/details/109039289

版权

每日学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

如果一个元素没有在data属性中进行初始化，可以通过computed计算属性进行赋值，但无法无通methods中的函数进行赋值。但因为computed中的返回是一个函数，所以如果函数中对应的返回值发生了变化，元素的值还是可以发生变化的。



<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app-one">
            <h2>{{title}}</h2>
            <p>{{say}}</p>
        </div>
        <div id="app-two">
            <h2>{{title}}</h2>
            <p>{{say}}</p>
            <button @click="changeTitle">改变第一个对象中title属性</button>
        </div>
        <script>
            var one= new Vue({
                el: '#app-one',
                data:{
                    title:'app-one的内容'
                },
                computed:{
                    say:function(){
                        return 'Hello One';
                    }
                }
            })
            var two= new Vue({
                el: '#app-two',
                data:{
                    title:'app-two的内容'
                },
                methods:{
                    changeTitle:function(){
                        one.title="已经改名了";
                        one.say='这个修改是无效的。'//这里的赋值 ，将不会改变say的内容
                    }
                },
                computed:{
                    say:function(){
                        return one.title; //这里会随着title的改变，而改变say的值
                    }
                }
            })
           
        </script>
    </body>
</html>

dpj_1980

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《Vue.js从入门到实战》_example_02_05_computed和data中赋值的区别

如果一个元素没有在data属性中进行初始化，可以通过computed计算属性进行赋值，但无法无通methods中的函数进行赋值。但因为computed中的返回是一个函数，所以如果函数中对应的返回值发生了变化，元素的值还是可以发生变化的。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>
复制链接

扫一扫