vue模板语法{插值表达式}的用法_综合

插值表达式是什么？

对比：jquery中：text( )函数原生Js中：innerHTMLvue中：{ { message }}

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

这段代码的意思可以用原生js的思路理解为，一个父元素id：app，现在设置他的innerTEXT，设置内容为变量message

exportdefault {
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}}