Vue-模板语法

最新推荐文章于 2024-06-13 23:47:14 发布

抗争的小青年

最新推荐文章于 2024-06-13 23:47:14 发布

阅读量85

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/liyuchenii/article/details/126127795

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

今天和大家分享一下Vue里的模板语法，这部分的内容比较基础，而且也很好理解。

文本

使用Vue自带的插值语法进行书写

{{}}

注意：

我们可以在双括号里填写状态(vue实例里data里的值)，比如在Vue实例中，有个状态叫做msg，我们可以这样用它：{{msg}}

识别html标签

使用v-html指令，可以非常容易让Vue知道你在这个地方是要渲染一个DOM节点的。

<div v-html="html"></div>

案例

<body>
  <div class="box">
    {{username}}
    <div v-html="html"></div>
  </div>
</body>

</html>
<script src="../js/vue.js"></script>
<script>
  var app = new Vue({
    el: ".box",
    data() {
      return {
        username: "xm",
        html: '<h1>我是h1标签</h1>'
      }
    }
  })
</script>

Snipaste_2022-07-28_08-51-33

使用JavaScript表达式

表达式：加减乘除，三元运算符，与或非

vue提供了完全的javaScript的数据支持

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{age+1}}:{{age>5?"成年":"未成年"}}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>