vue中关于computed的理解及其其他扩展

最新推荐文章于 2024-05-18 20:32:59 发布

Awen_liang1002

最新推荐文章于 2024-05-18 20:32:59 发布

阅读量2.4k

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_37615202/article/details/78219316

版权

VUE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

computed相当于属性的一个实时计算，如果实时计算里关联了对象，那么当对象的某个值改变的时候，同事会出发实时计算

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <parent :childrens="childrens" ></parent>
</div>

<script type="text/javascript">
    var parent = Vue.extend({
        props: {
            childrens: ""
        },
        template: '<div><div>{{age}}</div><div>{{name}}</div></div>',
        data: function () {
            return {
                name: '',
                age: 18
            }
        },
        computed: {
            age: function () {
                return this.childrens.age + 10;
            },
            name: function () {
                return this.childrens.name + "haha";
            }
        }, 
        created: function () {
            var _parent = this.$parent;
            this._set = {};
            this._set = _parent;
            console.log(this._set);
        }
    })

    var app = new Vue({
        el: '#app',
        data: {
            childrens : {
                name: "小强",
                age: 20,
                sex: "男"
            } 
        },
        components: {
            parent, 
        },
    })
</script>
</body>
</html>

打开开发者选项

然后输入代码

app.$data.childrens.age = 60

app.$data.childrens.name = "大强"

另外：当你的模板template这样写的时候会报错：

百度可知：

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

原来vue模板只能有一个根对象；所以想要正常显示效果，你的用一个div或者别的标签来包裹全部的元素;正常写法见第一段代码

Awen_liang1002

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中关于computed的理解及其其他扩展

computed extend Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
复制链接

扫一扫