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

青梅煮码

发布于 2023-01-16 15:18:54

6240

插值表达式是什么？

对比： jQuery中：text( )函数 原生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}}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-06-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐