vue教程——03 插值操作

最新推荐文章于 2024-04-29 11:29:56 发布

Dormiveglia-flx

最新推荐文章于 2024-04-29 11:29:56 发布

阅读量228

点赞数

分类专栏： Vue教程文章标签： vue js javascript

本文链接：https://blog.csdn.net/sugerfle/article/details/115521899

版权

Vue教程专栏收录该内容

14 篇文章 1 订阅

订阅专栏

vue教程——03 插值操作

一 Mustache语法

在vue对象挂载的dom元素中，{{}}不仅可以直接写变量，还可以写简单表达式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mustache的语法</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{message}},message2</h2>

    <!-- Mustache的语法不仅可以直接写变量，还可以写简单表达式 -->
    <h2>{{firstName + lastName}}</h2>
    <h2>{{firstName + " " + lastName}}</h2>
    <h2>{{firstName}}{{lastName}}</h2>
    <h2>{{count * 2}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"message",
        firstName:"firstName",
        lastName:"lastName",
        count:2
      }
    })

  </script>
</body>
</html>

二 v-once

v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。

  <div id="app">
    <h2>{{message}}</h2>
    <!-- 只会渲染一次，数据改变不会再次渲染 -->
    <h2 v-once>{{message}}</h2>

  </div>

三 v-html

v-html 解析 HTML并输出解析后的内容
如果后端返回包含了标签的内容，可以转化为html页面的形式展示。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-html指令的使用</title>
</head>
<body>
  <div id="app">
    <h2>不使用v-html</h2>
    <h2>{{url}}</h2>
    <h2>使用v-html，直接插入html</h2>
    <h2 v-html="url"></h2>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"message",
        url:"<a href='http://www.baidu.com'>百度链接</a>"
      }
    })
  </script>
</body>
</html>

四 v-text

v-test会全部替换标签体里的内容，而且内部支持写表达式。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-text指令的使用</title>
</head>
<body>
  <div id="app">
    <h2 v-text="message">这里有内容</h2>
    <h2 v-text="info + '!'"></h2>
    <h2>你好{{message}}</h2>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!',
        info: "Hello",
      }
    })
  </script>
</body>
</html>

依次输出的内容是：

Hello Vue!

Hello ！

你好Hello Vue!

五 v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。官方API

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-cloak指令的使用</title>
</head>
<meta charset="utf-8">
<title></title>
<style>
    /*属性选择器*/
	[v-cloak]{
		display:none;
	}
</style>
</head>
<body>
<div id="app" >
 <!--解决插值闪烁    （加入v-cloak表示页面加载完成再显示）-->
  <p v-cloak>{{ message }}</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>