10_姓名案例-计算属性

最新推荐文章于 2022-11-28 17:18:45 发布

id不存在。

最新推荐文章于 2022-11-28 17:18:45 发布

阅读量56

点赞数

分类专栏： vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_52759526/article/details/125833399

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

姓名案例-计算属性

计算属性：

1.定义：要用的属性不存在，要通过已有属性计算得来

2.原理：底层借助了Object.defineproperty方法提供的getter和setter

3.get函数什么时候执行？

（1）初次读取时会执行一次

（2）当依赖的数据发生改变时会被再次调用

4.get有什么作用？

当有人读取fullName时，get就会被调用，且返回值就作为fullName的值

5.优势：与methods实现相比，内部有缓存机制（备用），效率更高，调试方便

6.备注：

（1）计算属性最终会出现在vm上，直接读取使用即可

（2）如果计算属性要被修改，那必须写set函数响应修改，且set中要引起计算时依赖的数据发生改变。

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br /><br />
        名：<input type="text" v-model="lastName"> <br /><br />
        全名：<span>{{fullName}}</span> <br /><br />
    </div>
</body>

<script type="text/javascript">
	const vm = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三',
        },
        //完整写法
        computed: {
            fullName:{
            	get(){
            		console.log('get被调用了')
            		return this.firstName + '-' + this.lastName
            	},
            	set(value){
            		console.log('set',value)
            		const arr = value.split('-')
            		this.firstName = arr[0]
            		this.lastName = arr[1]
            	}
            }
    })
</script>

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br /><br />
        名：<input type="text" v-model="lastName"> <br /><br />
        全名：<span>{{fullName}}</span> <br /><br />
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三',
        },
        computed: {
        //简写
            fullName() {
                return this.firstName + '-' + this.lastName
            }
        }
    })
</script>