vue-002 插值的相关操作，v-once,v-html,v-text，v-pre

最新推荐文章于 2024-01-17 10:54:15 发布

youngcave2

最新推荐文章于 2024-01-17 10:54:15 发布

阅读量120

点赞数

分类专栏： vue入门文章标签： javascript vue.js vue html js

本文链接：https://blog.csdn.net/yougcave/article/details/113748059

版权

vue入门专栏收录该内容

19 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue.js中的插值指令，包括v-once用于一次性渲染元素，v-html用于显示HTML内容，v-text作为{{message}}的等效选项，以及v-pre防止模板解析。通过示例展示了各指令的用法和效果，如v-once在数据更新后不再响应变化，v-cloak则确保内容在完全加载后显示。

摘要由CSDN通过智能技术生成

插值语法

最简单的格式

{{message}}

稍微复杂点的格式

{{message}}
{{message}},world
{{message + ' ' + counter}}
{{counter * 2}}

再把上面这几个稍微复杂点的格式举个完整的例子放上来

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

<div id="app">
    <h2 v-pre>举个例子</h2>

    双大引号随意往哪一丢，数据就出来了
    <h4>{{message}}</h4>
    <h4>{{lastName}}</h4>
    <h4>{{firstName}}</h4>
    <h4>{{counter}}</h4>

    可以直接跟文字结合
    <h4>{{message}},world</h4>
    <h4>我姓{{firstName}},我叫{{lastName}}</h4>
    <h4>我有{{counter}}块</h4>

    大括号里面也可以拼接数据
    <h4>{{firstName + ' ' + lastName}}</h4>
    <h4>{{firstName + ' ' + lastName + '有' + counter + '块钱'}}</h4>

    如果是数字类型的话，可以直接做算法
    <h4>{{counter * 2}}</h4>
    <h4>{{counter + 10}}</h4>
    <h4>{{counter - 10}}</h4>
    <h4>{{counter / 5}}</h4>

</div>
<!--注意src的引用地址-->
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'hello world',
            lastName:'Wu',
            firstName:'Wang',
            counter:100
        }
    })
</script>

</body>
</html>

v-once

表示它后面的元素只渲染一次，渲染后再修改message的值，第一行内容改变，第二行不会变

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

v-html

加了v-html才能把html语句的效果显示出来，不加的话就只会显示代码语句

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

<div id="app">
    <h2 v-pre>举个例子</h2>

    用v-html才能把HTML代码的效果显示出来
    <div>{{oneImg}}</div>
    <div v-html="oneImg"></div>

    <div>{{oneUrl}}</div>
    <div v-html="oneUrl"></div>

</div>
<!--注意src的引用地址-->
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            oneImg:'<img src="https://www.baidu.com/img/flexible/logo/pc/result.png">',
            oneUrl:'<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>

</body>
</html>

v-text

{{message}} 就是v-text='message'的简写，下面两行是一模一样的

    <h4>{{message}}</h4>
    <h4 v-text="message"></h4>

v-pre

加了可以让{{message}}的大括号失效

<div id="app">

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

</div>
<!--注意src的引用地址-->
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'hello world'
        }
    })
</script>

显示效果是这样的,加了v-pre就会显示原来的代码

hello world

v-cloak

加了这个，网页加载完整才会显示内容，不加的话，就会加载一点显示一点。

网速慢的时候，会先显示{{message}},再显示里面的内容

加了v-cloak,就会一直显示空白，直接加载完再显示内容

使用时有两步

1.在CSS里加

        [v-cloak]{
            display:none;
        }

2.在html里加

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

youngcave2

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录