关于vue.js:vue模板语法插值表达式

首先来说插值表达式是什么:
相似于jQuery的text()函数,原生js的innerHTML

<div id="app">
  {{ message }}
</div>

这段代码的意思能够用原生js的思路了解为,一个父元素id:app,当初设置他的innerTEXT,设置内容为变量message

export default {
data() {
return {
  message:'这里就是显示的文字了'
 }
}
//这段代码会被主动渲染为:
<div id="app">
  这里就是显示的文字了
</div>

插值表达式也能够放计算结果{computed}

<template>
  <div>{{com}}</div>
</template>

<script>
export default {
  data() {
    return {};
  },computed:{
      com(){
          return 2+2
      }
  }
};
</script>

这里{{com}}渲染的后果很简略2+4所以后果为4
这里有一个须要留神的点就是{{com}}外面的名字须要是computed中函数的名字比方com()>{{com}}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理