02-插值

最新推荐文章于 2022-10-17 17:10:26 发布

小影

最新推荐文章于 2022-10-17 17:10:26 发布

阅读量87

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/small_shadow/article/details/112403165

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

01-mustache

<body>
    <div id="app">
      <h2>{{a}} {{b}}</h2>
      <h2>{{a+" "+b}}</h2>
      <h2>{{a+"?"+b}}</h2>
      <h2>{{num *2}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          a: '这是a',
          b: '这是b',
          num: 2
        }
      })
    </script>
  </body>

结果：
这是a 这是b
这是a 这是b
这是a?这是b
4

02-v-指令的使用

v-once，使元素不随相应的改变而改变，仍显示改变前的效果
v-html，将返回元素以html代码形式展示出来
v-text，将返回元素以文本形式展示出来
v-pre，将元素按原本样式原封不动展示出来
v-cloak，js加载好后v-cloak属性会被取消
v-bind，动态绑定元素属性，例如a的href，img的src等

<body>
    <div id="app">
      <h2>{{message}}</h2>
      <h2 v-once>{{message}}</h2>
      <!--      v-once不随元素改变而改变-->
      <h2 v-html="url"></h2>
      <!--      v-html将返回元素以html代码形式展示出来-->
      <h2 v-cloak>{{message}}</h2>
      <!--      js加载好后v-cloak属性会被取消-->
    </div>
    <script src="../js/vue.js"></script>
    <script>
      setTimeout(function () {
        const app = new Vue({
          el: "#app",
          data: {
            message: 6,
            url: '<a href="http://www.baidu.com">百度一下</a>',
          },
        });
      }, 1000);
    </script>