Vue.js基础---常用内置指令

最新推荐文章于 2024-05-17 11:40:43 发布

VIP文章请叫我杰拉德6

最新推荐文章于 2024-05-17 11:40:43 发布

阅读量368

点赞数

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

本文链接：https://blog.csdn.net/weixin_46505015/article/details/118439092

版权

Vue.js基础—常用内置指令

1.v-html和v-text的区别

v-html作用：更新元素的 innerHTML(innerHTML 指的是标签间的所有内容,并且innerHTML包含标签，标签会被识别，并且会被解析，呈现对应的效果)
v-text作用：更新元素的 textContent

相同点：2者在标签内设置内容都无效

<body>
    <div id="app">

        <div :style="{fontSize:fontSize + 'px' }" v-html="msg"> 在v-html里面设置内容无效 </div>
        <div :style="{fontSize:fontSize + 'px' }" v-text="msg"> 在v-text里面设置内容无效 </div>

    </div>

    <script src="./Vue.js"></script>
    <script>


        let vm = new Vue({
   
            el: '#app',

            data: {
   
                msg: ' Hello Vue ',
                fontSize: 20

            }

        })


    </script>
</body>

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

不同点：v-html能解析msg里面的标签内容，而v-text不能

<body>
    <div id="app">

        <div :style="{fontSize:fontSize + 'px' }" v-html="msg"> 在v-html里面设置内容无效 </div>
        <div :style="{fontSize:fontSize + 'px' }" v-text="msg"> 在v-text里面设置内容无效 </div>

    </div>

    <script src="./Vue.js"></script>
    <script>


        let vm = new Vue({
   
            el: '#app',

            data: {
   
                //修改msg的值
                msg: '<span> Hello Vue </span>',
                fontSize: 20

            }

        })


    </script>
</body>

运行结果：v-text会将标签 span当做字符串渲染
在这里插入图片描述
运行结果：v-html会将标签 span进行转义，从而渲染到dom

2.v-once

v-once作用：这个指令不需要任何表达式，它的作用就是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染，也就是说使用v-once，那么该块都将被视为静态内容。在实际的业务场景中是很少使用的，只有我们想进一步去优化性能的时候，可能会用到。

<body>
    <div id="app">

        <span :style="{fontSize:fontSize + 'px'}">{
   {
   count}}</span>
        <br>
        <button @click='handle'> 加一 </button>

    </div>

    <script src="./Vue.js"></script>
    <script>


        let vm = new Vue({
   
            el: '#app',

            data: {
   
                count: 10,
                fontSize: 30
            },

            methods: {
   
                handle: function (

最低0.47元/天解锁文章

请叫我杰拉德6

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Vue.js基础---常用内置指令

Vue.js基础—常用内置指令1.v-html和v-text的区别v-html作用：更新元素的 innerHTML(innerHTML 指的是标签间的所有内容,并且innerHTML包含标签，标签会被识别，并且会被解析，呈现对应的效果)v-text作用：更新元素的 textContent相同点：2者在标签内设置内容都无效<body> <div id="app"> <div :style="{fontSize:fontSize + 'px' }
复制链接

扫一扫