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

42次阅读

共计 455 个字符,预计需要花费 2 分钟才能阅读完成。

首先来说插值表达式是什么:
相似于 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}}

正文完
 0