01-Vue插值操作

最新推荐文章于 2024-09-22 02:21:54 发布

无味无感

最新推荐文章于 2024-09-22 02:21:54 发布

阅读量74

点赞数

分类专栏： VueJs 文章标签： Mustache语法 Vue.js 数据绑定表达式变量

本文链接：https://blog.csdn.net/qq_41863998/article/details/117675285

版权

VueJs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Mustache语法(也就是双括号)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
<!--  mustache语法中，不仅仅可以直接写变量，还可以写表达式-->
  <h2>{{message}}</h2>
  <h2>{{message}},李银河</h2>
  <h2>{{firstName+lastName}}</h2>
  <h2>{{firstName+' '+lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter*2}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script>
  const app=new Vue ({
    el: '#app',
    data: {
      message: '张三爱李白',
      firstName: '张三',
      lastName: '李四',
      counter: 100
    },
  })
</script>

</body>
</html>