Vuejs 插值操作

最新推荐文章于 2020-10-22 20:26:24 发布

苦涩2020

最新推荐文章于 2020-10-22 20:26:24 发布

阅读量164

点赞数

分类专栏： Vuejs 前端文章标签： vue

本文链接：https://blog.csdn.net/UserPython/article/details/108290931

版权

前端同时被 2 个专栏收录

80 篇文章 1 订阅

订阅专栏

Vuejs

8 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中包括mustache语法、v-once、v-html、v-text、v-pre和v-cloak在内的多种插值操作。v-once指示元素和组件仅渲染一次，不响应数据变化；v-html用于解析并渲染字符串中的HTML标签；v-text与mustache类似，但会替换元素内所有文本；v-pre则用于跳过元素及其子元素的编译过程，保留原始mustache标记；v-cloak则用于在Vue解析前隐藏mustache语法，解析完成后显示。

摘要由CSDN通过智能技术生成

mustache语法

<div id='app'>
  <h2>{{message}}</h2>
  <h2>{{message}}, 苦涩！</h2> 
  <!-- mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 -->
  <h2>{{firstName + ' ' + lastName}}</h2> 
  <h2>{{firstName}} {{lastName}}</h2>
  <!-- 计算 -->
  <h2>{{counter * 2}}</h2> 
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      firstName: "kuse",
      lastName: "wang",
      counter: 100
    }
  })
</script>

v-once

表示元素和组件只渲染一次，不会随着数据的变化而变化

<div id='app'>
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
    }
  })
</script>

v-html

将字符串中的HTML标签解析出来并且进行渲染

<div id='app'>
  <h2>{{url}}</h2>
  <h2 v-html = 'url'></h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      url: "<a href='http://www.baidu.com'>百度一下</a>"
    }
  })
</script>

v-text

功能和mustache比较相似，但会将标签内的文本覆盖

<div id='app'>
  <h2>{{message}}</h2>
  <h2 v-text = 'message'></h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
    }
  })
</script>

v-pre

用户跳过这个元素和它子元素的编译过程，用于显示原本的mustache语法

<div id='app'>
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
    }
  })
</script>

v-cloak

在vue解析前，隐藏mustache语法
在vue解析后，显示mustache语法

<div id='app' v-cloak>
  <h2>{{message}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
    }
  })
</script>