Vue之插值操作

yuanshuai

发布于 2022-08-22 16:38:18

5590

发布于 2022-08-22 16:38:18

文章被收录于专栏：一只程序原

Vue插值操作

1.Mustach语法

Mustach语法就是双大括号，所以也有人直接叫双括号语法,我们可以利用其进行基本的拼接和运算

    <div id="app">
        <h1>{{message}}</h1>
        <h1>{{message}},bye!</h1>
        <h1>{{message + ' ' + message}}</h1>
        <h1>{{message}} + ' ' + {{message}}</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'good night'
            }
        })
    </script>

相关完整代码展示：

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

<div id="app">
  <h2>{{message}}</h2>
  <h2>{{message}}, Tomcatist!</h2>

  <!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
  <h2>{{firstName + lastName}}</h2>
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      firstName: 'kobe',
      lastName: 'bryant',
      counter: 100
    },
  })
</script>

</body>
</html>

运行结果：

2.v-once

当我们希望页面中的数据只保持第一次渲染出的效果，不需要支持响应式的操作时，就可以使用v-once的属性

    <div id="app">
        <h1>{{message}}</h1>
        <h1 v-once>{{message}}</h1>
    </div>

在控制台修改message的值时，添加了v-once的h1中的值没有跟着变化，仍然展示着最初的数据

相关完整代码展示：

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

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

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

</body>
</html>

3.v-html

当后台传给我们的数据是个标签时，直接用Mustach展示的是未经解析完整的标签

    <div id="app">
        <h1>{{url}}</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'good night',
                url : <a href="http://www.baidu.com">百度一下</a>
            }
        })
    </script>

那我们希望展示按照HTML格式进行解析，并显示出相应的内容，就需要使用v-html指令

    <div id="app">
        <h1 v-html=url></h1>
    </div>

相关完整代码展示：

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

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

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

</body>
</html>

4.v-text

v-text能展示出文本信息，缺点是和Mustach相比不够灵活

    <div id="app">
        <h1 v-text=message></h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'good night',
            }
        })
    </script>

相关完整代码展示：

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

<div id="app">
  <h2>{{message}}, Tomcatist!</h2>
  <h2 v-text="message">,Tomcatist!</h2> 
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

</body>
</html>

运行结果：

按之前经验来说，这里第二行也应该显示 你好啊, Tomcatist! ，但是只显示了v-text中的文本，而把标签里的文本覆盖了，所以我们想做一些表达式操作就很难，所以说和Mustach相比不够灵活！

5.v-pre

v-pre能将数据不经过Vue的解析原封不动的展示出来

    <div id="app">
        <h1>{{message}}</h1>
        <h1 v-pre>{{message}}</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'good night',
            }
        })
    </script>

相关完整代码展示：

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

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

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

</body>
</html>

6.v-cloak

在Vue解析前，div会有一个v-cloak属性在Vue解析后，div没有一个v-cloak属性

cloak是斗篷的意思，当遇到js文件没有解析完时，包含有Vue语法的HTML元素就像添加了v-pre的属性一样原封不动的展示数据，在js文件解析完成时，带有Vue语法的HTML代码会通过解析后生成相应的数据被展示出来，这个过程会有一个闪现的效果，用户体验感不好，所以给HTML元素添加v-cloak指令，并给带有v-cloak属性的HTML元素的样式设为dispaly:none，在js文件解析完后，v-cloak属行就会消失，想斗篷一样把自己罩住，display的样式也会失效，数据会通过Vue的解析展示出来。可以用定时器的方式展示v-cloak的效果

    <style>
        [v-cloak] {
            display: none;
        }
    </style>

    <div id="app">
        <h1 v-cloak>{{message}}</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        setTimeout(function(){
            var app = new Vue({
            el : '#app',
            data : {
                message : 'good night',
            }
        })
        },1000)
    </script>

我们这里设置了页面会在1秒后展示出good night，也因为v-cloak属行，在js没有解析完时，将数据用css的方法隐藏，没有显示出{}，在1秒后js解析完毕，v-cloak的属性会自动消失，数据通过解析展示出good night。

相关完整代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>

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

<script src="../js/vue.js"></script>
<script>
  // 在vue解析之前, div中有一个属性v-cloak
  // 在vue解析之后, div中没有一个属性v-cloak
  setTimeout(function () {
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  }, 1000)
</script>

</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021.11.30，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

vue.js

html

登录后参与评论

0 条评论

热度