标签:eve 格式 快速 mil 简单的 date 设置 而且 length
在Vue中有多种方法为视图设置值:
1.使用指令直接将数据值绑定到视图
2.使用简单的表达式对内容进行简单的转换
3.使用过滤器对内容进行简单的转换
除此之外,我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。
如果在模板中放入太多的逻辑会让模板过重而且难以维护。官方强调对于任何复杂逻辑,最好使用计算属性。
计算属性可用于快速计算视图(View)中显示的属性。这些计算将被缓存,并且只在需要时更新。
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
data: {
message: ‘Hello‘
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split(‘‘).reverse().join(‘‘)
},
updateMessage: {
get: function() {
console.log(‘计算属性‘, this.message)
return this.message
}
}
}
注意当模板中不使用updateMessage,即使message发生改变之后,也不会走computed。
在vue中,computed的属性可以被视为是data一样,可以读取和设值。因此,在computed中可以分为getter(读取)和setter(设值),一般情况下,是没有setter的,computed只是预设了getter,也就是只能读取,不可以改变设值。所以,computed默认格式(是不表明getter函数的)
当赋值给计算属性的时候,将调用setter函数。多用于在模板组件中需要修改计算属性自身的值的时候。
<div>{{totalMarks}}</div>
<div>{{computedMsg}}</div>
data () {
return {
results: [
{ name: ‘English‘, marks: 70 },
{ name: ‘Math‘, marks: 80 },
{ name: ‘History‘, marks: 90 }
],
msg:‘haha‘
}
},
computed: {
totalMarks(){
console.log(1)
let total=0
for(let i=0;i<this.results.length;i++){
total+=this.results[i].marks
}
return total
},
computedMsg:{
get:function(){
return this.msg
},
set:function(newVal){
this.msg=newVal
}
}
},
mounted () {
this.computedMsg=‘??‘
}
标签:eve 格式 快速 mil 简单的 date 设置 而且 length
原文地址:https://www.cnblogs.com/Mijiujs/p/12070986.html