前端开发-vue常见易混淆指令

最新推荐文章于 2024-06-05 17:03:44 发布

薛定谔的量子猫.

最新推荐文章于 2024-06-05 17:03:44 发布

阅读量576

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Wsnbb007/article/details/128131461

版权

v-text和v-html区别

v-text指令

官方文档传送门：API — Vue.js

作用:设置元素的文本 innerText, 如果元素有文本,则会覆盖现有的文本。

v-html指令

官方文档传送门：API — Vue.js

作用：设置元素的innerHTM。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <p v-text="msg">你是谁</p>
        <p v-text="msg1">你是谁</p>
        <p v-html="msg1">你是谁</p>
    </div>
    
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                msg: '我是坤坤!',
                msg1:'我是<h1>会唱跳rap的</h1>坤坤'
            }
        })
    </script>
</body>
</html>

输出结果:

从输出结果可以看出,v-text和v-html都会覆盖原有的文本,而v-html还可以识别标签并编译,v-text只当成文本识别。

v-if和v-show区别

v-if指令

官网文档：API — Vue.js

根据条件渲染数据,本质是在动态的创建或者删除元素节点。

应用场景：如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if, v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销。

v-show指令

官网文档：API — Vue.js

本质是在控制元素的 css 样式, display: none;

应用场景：如果是频繁的切换显示隐藏, 用 v-show,因为v-if, 频繁切换会大量的创建和删除元素, 消耗性能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <button @click="flag = !flag">按钮</button>
        <p v-if="flag">v-if</p>
        <p v-show="flag">v-show</p>
    </div>
   
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                flag:'true'
            }
        })
    </script>
</body>
</html>