Vue学习（二）——指令

最新推荐文章于 2022-10-23 18:44:27 发布

秃头的毛睿

最新推荐文章于 2022-10-23 18:44:27 发布

阅读量125

点赞数

本文链接：https://blog.csdn.net/weixin_45927758/article/details/108921484

版权

1.v-once指令

该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="jdg">
        <h1>{{msg}}</h1>
        <h1 v-once>{{msg}}</h1>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app=new Vue({
            el:'#jdg',
            data:{
                msg:'JDG'
            }
        })
    </script>
</body>
</html>

我通过控制台修改msg的值

2.v-html指令

我们从服务器中请求的数据本身就是一个HTML代码，使用{{}}来输出，那么得到的就是一段HTML代码，我们使用这个指令可以得到一段链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="jdg">
        <p>{{link}}</p>
        <p v-html='link'></p>

    </div>
    <script src="../vue.js"></script>
    <script>
        const app=new Vue({
            el:'#jdg',
            data:{
                link:'<a href="https://www.baidu.com/">百度一下</a>'
            }
        })
    </script>
</body>
</html>

3.v-text指令

这一条指令和Mustache语法类似，不同的是他会把标签内的元素全部覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="jdg">
        <p>{{link}}总冠军</p>
        <p v-text='link'>总冠军</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app=new Vue({
            el:'#jdg',
            data:{
                link:'湖人'
            }
        })
    </script>
</body>
</html>

4.v-pre指令

显示未被浏览器解析之前的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="jdg">
        <p>{{link}}</p>
        <p v-pre>{{link}}</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app=new Vue({
            el:'#jdg',
            data:{
                link:'湖人'
            }
        })
    </script>
</body>
</html>

5.v-clock指令

不加v-clock

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="jdg">
        <p>{{link}}</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        setTimeout(function(){
            const app=new Vue({
            el:'#jdg',
            data:{
                link:'湖人总冠军'
            }
        })
        },1000)
    </script>
</body>
</html>

由于延时调用，标签没有时间解析就会出现这种情况

加上v-clock，在标签没有解析之前元素会存在这个属性，解析之后就不存在了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="jdg">
        <p v-clock>{{link}}</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        setTimeout(function(){
            const app=new Vue({
            el:'#jdg',
            data:{
                link:'湖人总冠军'
            }
        })
        },1000)
    </script>
</body>
</html>

6.Mustache语法

使用大括号把Vue中data中的元素括起来，这样就可以解析data变量了

秃头的毛睿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习（二）——指令

1.v-once指令该指令表示元素和组件只渲染一次，不会随着数据的改变而改变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>&
复制链接

扫一扫