模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑,都可以使用计算属性。
例:
<div id="app">
<p>{{msg}}</p>
<p>{{msgAttr}}</p>
<p>{{msgMd()}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg:"足球,篮球"
},
computed:{
msgAttr:function(){
return this.msg.replace(",","|");
}
},
methods:{
msgMd:function(){
return this.msg.replace(",","、");
}
}
})
</script>