zoukankan      html  css  js  c++  java
  • Vue 计算属性 computed

    1. 模板表达式


    模板内的表达式非常便利,但是它们的设计初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

    模板内的表达式只能完成简单的运算

    {{ msg.toUpperCase() }}
    
    data: {
    	msg: 'Hello'
    }
    

    2. computed 计算属性


    计算属性是基于它们的响应式依赖进行缓存的。只有在相关响应式依赖发生改变时它们才会重新求值。methods 不缓存

    computed 可以对属性进行更复杂的运算,将结果返回

    <div id="app">
    	<p>{{ msg }}</p>
    	<p>{{ tips }}</p>
    </div>
    
    let vm = new Vue({
    	el: '#app',
    	data: {
    		msg: 'Hello'
    	},
    	computed: {
    		tips: function(){
    			return this.msg.toUpperCase() + Math.random()
    		}
    	}
    })
    

    3. methods 也可以进行复杂运算


    <div id="app">
    	{{ tips() }}
    </div>
    
    <script>
    	let vm = new Vue({
    		el: '#app',
    		data: {
    			msg: 'Hello'
    		},
    		methods: {
    			tips: function(){
    				return this.msg.toUpperCase() + Math.random()
    			}
    		}
    	})
    </script>
    
  • 相关阅读:
    std::string构造函数
    shell命令-while语句
    shell命令-for语句
    shell命令-if语句
    softmax回归推导
    sigmod函数求导
    生成器面试题之一
    range和xrange的区别
    python里的input
    python中print和input的底层实现
  • 原文地址:https://www.cnblogs.com/cfmy/p/13348274.html
Copyright © 2011-2022 走看看