Day02-Vue的插值操作

最新推荐文章于 2024-08-21 14:09:37 发布

为什么瘦的人也会胖

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量96

点赞数 2

文章标签： vue js javascript

本文链接：https://blog.csdn.net/qq_56567593/article/details/115916656

版权

Day02-Vue的插值操作

Mustache语法

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 src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello',
            firstname: 'zhang',
            lastname: 'jin',
            counter: 100
        }
    })
</script>

结果：在这里插入图片描述

v-once指令

message为响应式数据：当在页面拿到数据后可以随意改变
v-once：只会渲染一次，不会随着数据的改变而改变

<div id="app">
    <!--message 响应式数据（当在页面拿到数据是可以随意改变）-->
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>
</div>
<!--message 响应式数据（当在页面拿到数据后可以随意改变）  v-once指令：只会渲染一次，不会随着数据的改变而改变-->
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello'
        }
    })
</script>

结果：
在这里插入图片描述

v-html指令

当message中的数据是HTML的格式时，直接用{{message}}只会原文打印，假如内容是超链接的话等HTML格式的话，就要用到v-html指令

<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: 'hello',
            url:'<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>

结果：
在这里插入图片描述

v-text指令

v-text和mustache类似，但是没有mustache灵活，比如要在文本后加东西的时候，mustache可以直接在 < h2 >这里加< /h2 >，但是如果用v-text的话会覆盖掉< h2 >这里的东西< /h2 >
结果：在这里插入图片描述

v-pre指令

作用：使内容直接显示，不让vue实例解析

    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>

结果：
在这里插入图片描述

v-cloak指令（cloak斗篷）

v-cloak:可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。
作用：当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

<!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>
    //v-cloak:可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。
    //当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
    //在vue解析前，div中有一个属性v-cloak
    //在vue解析后，地址中的v-cloak属性被清除
    setTimeout(function () {
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello'
            }
        })
    },1000)
</script>
</body>
</html>

ps:setTimeout(function(){},1000) 延时函数

为什么瘦的人也会胖

关注

2
点赞
踩
0

收藏

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

Day02-Vue的插值操作Mustache语法mustache：胡子/胡须“{{ }}”<div id="app"> <h2>{{message}}</h2> <h2>{{message}},派带星</h2> <h2>{{firstname + ' ' +lastname}}</h2>
复制链接

扫一扫