Vue插值操作

最新推荐文章于 2023-04-07 15:43:34 发布

我拿青春赌未来~

最新推荐文章于 2023-04-07 15:43:34 发布

阅读量222

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/helongzhi/article/details/126000873

版权

1. Mustache语法

mustache是胡须的意思，因为{{}}像胡须，又叫大括号语法。

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

<div id="app">
        <!-- 变量 -->
        <h2>{{name}}</h2>
        <!-- 表达式 -->
        <h2>{{count>5? "4": "5" }}</h2>
        <h2>{{4+3}}</h2>

    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    name: '张三',
                    count: 10

                }
            }
        })
    </script>

2. v-once

v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。（也就是再次修改修改值时，页面不会渲染）

 <div id="app">
        <!-- 第一次渲染 -->
        <h2>{{name}}</h2>
        <!-- 第二次渲染 -->
        <h2 v-once>{{name}}</h2>
  </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    name: '张三'
                    

                }
            }
        })
    </script>

上述{{name}}的name修改后，第一个h2标签数据会自动改变，第二个h2不会

3. v-html

在某些时候我们不希望直接输出<a href='http://www.baidu.com'>百度一下</a>这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。它是能够识别标签的，但是它会把所在标签的内容给覆盖

<body>
    <div id="app">
        <h2 v-html="src">12334</h2>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    src: "<a href='http://www.baidu.com'>百度一下</a>"
                }
            }
        })
    </script>

12334被覆盖了

4. v-text

v-text会覆盖dom元素中的数据，相当于js的innerText方法。不能识别标签

<div id="app">
        <h2 v-text="src">12334</h2>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    src: "<a href='http://www.baidu.com'>百度一下</a>"
                }
            }
        })
    </script>

5. v-pre

有时候我们期望直接输出{{name}}这样的字符串，而不是被{{}}语法转化的name的变量值，此时我们可以使用v-pre标签。

<div id="app">
        <h2 v-pre>{{name}}</h2>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    name:'张三'
                }
            }
        })

6. v-cloak

有时候因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页面显示从{{message}}到message变量“你好啊”的变化，这样闪动的变化，会造成用户体验不好。此时需要使用到v-cloak的这个标签。在vue解析之前，div属性中有v-cloak这个标签，在vue解析完成之后，v-cloak标签被移除。简单，类似div开始有一个css属性display:none;，加载完成之后，css属性变成display:block，元素显示出来。

<!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>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <h2>{{message}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    //在vue解析前，div中有一个属性cloak
    //在vue解析之后，div中没有一个属性v-cloak
    setTimeout(() => {
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊"
        }
      })
    }, 1000);
  </script>
</body>

</html>

这里通过延时1秒模拟加载卡住的状态，结果一开始不显示message的值，div元素中有v-cloak的属性，1秒后显示message变量的值，div中的v-cloak元素被移除。

我拿青春赌未来~

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue插值操作

这里通过延时1秒模拟加载卡住的状态，结果一开始不显示message的值，div元素中有v-cloak的属性，1秒后显示message变量的值，div中的v-cloak元素被移除。这样的字符串，而输出被html自己转化的超链接。这个标签，在vue解析完成之后，v-cloak标签被移除。到message变量“你好啊”的变化，这样闪动的变化，会造成用户体验不好。v-text会覆盖dom元素中的数据，相当于js的innerText方法。有时候因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页面显示从。..
复制链接

扫一扫