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

来源：互联网发布：nginx php 500错误编辑：程序博客网时间：2024/05/16 16:04

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或者别的标签来包裹全部的元素;正常写法见第一段代码

阅读全文

0 0