当前位置：网站首页>10_ Name Case - Calculation attribute

10_ Name Case - Calculation attribute

2022-07-26 23:52:00 【ID does not exist.】

Name Case - Compute properties

Compute properties ：

​ 1. Definition ： The attribute to use does not exist , To calculate from existing properties

​ 2. principle ： The bottom layer has the help of Object.defineproperty Method getter and setter

​ 3.get When does the function execute ？

​ （1） The first read is performed once

​ （2） When the dependent data changes, it will be called again

​ 4.get What's the role ？

​ When someone reads fullName when ,get It will be called , And the return value is as fullName Value

​ 5. advantage ： And methods Realize the comparison , There is an internal caching mechanism （ spare ）, More efficient , Debug is convenient

​ 6. remarks ：

​ （1） The calculated properties will eventually appear in vm On , Directly read and use

​ （2） If the calculation property is to be modified , That must be written set Function response modification , And set To cause the data that the calculation depends on to change .

<body>
    <div id="root">
         surname ：<input type="text" v-model="firstName"> <br /><br />
         name ：<input type="text" v-model="lastName"> <br /><br />
         full name ：<span>{
   {fullName}}</span> <br /><br />
    </div>
</body>

<script type="text/javascript">
	const vm = new Vue({
        el: '#root',
        data: {
            firstName: ' Zhang ',
            lastName: ' 3、 ... and ',
        },
        // Complete writing 
        computed: {
            fullName:{
            	get(){
            		console.log('get Is called the ')
            		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">
         surname ：<input type="text" v-model="firstName"> <br /><br />
         name ：<input type="text" v-model="lastName"> <br /><br />
         full name ：<span>{
   {fullName}}</span> <br /><br />
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false // prevent  vue  Generate production prompts at startup .

    const vm = new Vue({
        el: '#root',
        data: {
            firstName: ' Zhang ',
            lastName: ' 3、 ... and ',
        },
        computed: {
        // Abbreviation 
            fullName() {
                return this.firstName + '-' + this.lastName
            }
        }
    })
</script>
原网站

版权声明
本文为[ID does not exist.]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207180947452986.html

边栏推荐

猜你喜欢

随机推荐