Vue学习03_插值操作

最新推荐文章于 2023-11-18 20:40:09 发布

旧梦半岛

最新推荐文章于 2023-11-18 20:40:09 发布

阅读量188

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_48459574/article/details/108807644

版权

Vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

插值操作

Mustache也叫胡子语法，简单来说就是两个大括号{{}}，中间放置我们要显示的变量，只允许在标签内容中使用，不允许在属性中使用：
示例代码：

    <div id="app">
        <h2>{{message}}</h2>
        <p>{{'姓名：' + name +'，性别：' + sex + ',年龄:' + age}}</p>
        <p v-once>{{'姓名：' + name +'，性别：' + sex + ',年龄:' + age}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                name: '张三',
                sex: '男',
                age: 18
            }
        })
    </script>

运行结果：
在这里插入图片描述
2. v-once：看单词一次就是说，当有这个属性的时候，展示的内容不变，如上面的示例代码，当name的值改变时，存在v-once时，显示的内容不会发生改变：
示例代码：

    <div id="app">
        <h2>{{message}}</h2>
        <p>{{'姓名：' + name +'，性别：' + sex + ',年龄:' + age}}</p>
        <p v-once>{{'姓名：' + name +'，性别：' + sex + ',年龄:' + age}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                name: '张三',
                sex: '男',
                age: 18
            }
        })
    </script>

运行结果：当name的值发生改变时，第一个p标签没有设置v-once属性，所以值随之发生了变化，第二个p标签设置了p属性，因此值不发生变化：
在这里插入图片描述
3. v-html:将Mustache中插入的值解析成html：
示例代码：当没有使用v-html时：

    <div id="app">
        <h2>{{message}}</h2>
        <p>{{'姓名：' + name +'，性别：' + sex + ',年龄:' + age}}</p>
        <p v-once>{{'姓名：' + name +'，性别：' + sex + ',年龄:' + age}}</p>
        <p>{{url}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                name: '张三',
                sex: '男',
                age: 18,
                url: '<a href="https://www.baidu.com"></a>'
            }
        })
    </script>

运行结果：直接将url整体显示出来，并没有解析a标签：
在这里插入图片描述
使用v-html：
示例代码：

        <p>{{url}}</p>
        <p v-html="url"></p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                name: '张三',
                sex: '男',
                age: 18,
                url: '<a href="https://www.baidu.com">百度</a>'
            }
        })
    </script>

运行结果：
在这里插入图片描述
4. v-text:作用基本与Mustache一样，v-text返回的时一个string类型,但是一般不使用
示例代码：

    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-text="message"></h2>
        <p>{{'姓名：' + name +'，性别：' + sex + ',年龄:' + age}}</p>
        <p v-once>{{'姓名：' + name +'，性别：' + sex + ',年龄:' + age}}</p>
        <p>{{url}}</p>
        <p v-html="url"></p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                name: '张三',
                sex: '男',
                age: 18,
                url: '<a href="https://www.baidu.com">百度</a>'
            }
        })
    </script>

运行结果：
在这里插入图片描述
5. v-pre:不解析语法，比如要输出{{message}},而不是要输出message的值，那么可以使用v-pre：
示例代码：第一个p标签没有v-pre属性，所以会解析message的值，第二个标签有v-pre属性，因此不会解析，会直接原封不动的输出：

    <div id="app">
        <p>{{message}}</p>
        <p v-pre>{{message}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message : 'Hello World'
            },
            methods: {}
        });
    </script>

运行结果：
在这里插入图片描述
6. v-cloak：在Vue解析div之前有v-cloak，在Vue解析之后没有v-cloak：在这里可以配合display：none使用，为p标签添加v-cloak属性，在Vue解析div之前，v-cloak存在，因此style生效，display的值为none，界面没有任何东西显示，在Vue解析div之后，v-cloak小时，style失效，界面显示出内容：
示例代码：

<!DOCTYPE html>
<html lang="zh-CN">

<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>Vue练习</title>
    <script src="../js/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <p v-cloak>{{message}}</p>
    </div>
    <script>
        setTimeout(function () {
            const app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello World'
                },
                methods: {}
            });
        }, 5000)
    </script>
</body>

</html>

运行截图：
刚开始，style生效：界面不显示任何内容
在这里插入图片描述
五秒钟后，Vue开始解析div，v-cloak小时，style失效：

旧梦半岛

关注

0
点赞
踩
0

收藏

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

插值操作Mustache也叫胡子语法，简单来说就是两个大括号{{}}，中间放置我们要显示的变量：示例代码： <div id="app"> <h2>{{message}}</h2> <p>{{'姓名：' + name +'，性别：' + sex + ',年龄:' + age}}</p> <p v-once>{{'姓名：' + name +'，性别：' + sex + ',年龄
复制链接

扫一扫

专栏目录