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

插值表达式是什么?

对比:
jquerytext( )函数
原生Js中innerHTML
vue{{ message }}

<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) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » vue模板语法{插值表达式}的用法

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活