vue的常用指令及详情解释

最新推荐文章于 2024-07-09 00:17:48 发布

阿彤の小铃铛

最新推荐文章于 2024-07-09 00:17:48 发布

阅读量842

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_47295135/article/details/109581748

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

v-if //根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
v-else-if// 必须和v-if一起用才可以 不能单独用 而且必须在v-if下面 中间有别的标签也会报错。
v-else // 必须和v-if一起用才可以 不能单独用 而且必须在v-if下面 中间有别的标签也会报错。
v-show：// 根据表达式之真假值，切换元素的 display CSS 属性。
v-for // 循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。
v-bind // 动态地绑定一个或多个特性，或一个组件 prop 到表达式。
v-on // 用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。
v-model // 实现表单输入和应用状态之间的双向绑定
v-pre // 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-once // 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
v-cloak // 防止刷新页面，网速慢的情况下出现{{ message }}等数据格式

1.v-html

双大括号无法渲染html标签，我们需要使用V-HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-html</title>
</head>
<body>
    <div id="ztt_app">
        <div v-html="vue"></div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let ztt_app=new Vue({
    el:"#ztt_app",
    data:{
        vue:'<h1>双大括号语法无法渲染HTML标签，我们需要使用v-html。</h1> '
    }
})
</script>
</html>

2.v-html

类似双大括号语法渲染数据得另一种方式是使用v-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-text</title>
</head>
<body>
    <div id="ztt_app">
        <div v-text="name"></div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let ztt_app=new Vue({
    el:"#ztt_app",
    data:{
        name:'<h1>双大括号语法渲染数据得另一种方式</h1> '
    }
})
</script>
</html>

3.v-for

数组和对象得渲染方式
在日常工作使用中及其广泛，如常见的列表数据获取，写法规则

	<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-text</title>
</head>
<body>
    <div id="zhy_app">
        <h2>小铃铛的爱好</h2>
        <ul>
            <li v-for="item in zzz">{{ item }}</li>
        </ul>
        <h2>学生的爱好</h2>
        <ul>
            <li v-for="stu in sss">{{ stu.name }}的爱好是{{ stu.hobby}}</li>
        </ul>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let ztt_app = new Vue({
        el: "#ztt_app",
        data: {
            zzz: [
                "旅游",
                "烘焙",
                "手作"
            ],
            sss: [
                {
                    name: '小铃铛',
                    hobby: "girl"
                },
                {
                    name: '小土豆',
                    hobby: "girl"
                },
                {
                    name: '小西瓜',
                    hobby: "study"
                },
            ]}
    })
</script>
</html>

####### 4:v-if 数据真假判断方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app01">
        <div v-if="role == 'shanshan'">
            <h2>欢迎小美女</h2>
        </div>
        <div v-else-if="role == 'longting'">
            <h2>欢迎小龙女</h2>
        </div>
        <div v-else>
            <h2>滚~~~</h2>
        </div>
    </div>
    <script>
        // 请注意看HTML标签元素，v-if底层使用appendChild实现
        let app01 = new Vue({
            el: "#app01",
            data: {
                role: "shanshan"
            }
        })
    </script>
</body>
</html>

通过上面的代码我们可以看出，v-if的作用是控制标签的显示，它通过判断添加标签，底层采用的是appendChild来实现的，下面我们来看一个同样也是控制标签显示的另一个指令v-show。

5.v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app01">
        <h1 v-show="isShow">Hello Vue!</h1>
    </div>
    <script>
        // v-show的实现原理是通过控制样式的display
        let app01 = new Vue({
            el: "#app01",
            data: {
                isShow: true
            }
        })
    </script>
</body>
</html>

与v-if不同的是，v-show通过样式的display控制标签的显示。

####### 6.v-if v-show得区别
v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件； v-show 则只是简单地基于 CSS 切换。
v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

7.v-else

必须和v-if一起用才可以不能单独用而且必须在v-if下面中间有别的标签也会报错

<div id="app">
　　<p v-if="height > 1.7">小明的身高是: {{height}}m</p>
　　<p v-else>小明的身高不足1.70m</p>
</div>
<script src="js/vue.js"></script>
<script>
　　new Vue({
　　　　　　　　el: '#app',
　　　　　　　　data: {
　　　　　　　　height: 1.88
　　　　}
});
</script>

8.v-else-if

<div id="app">
        <p>输入的成绩对应的等级是:</p>
        <p v-if="score >= 90">优秀</p>
        <p v-else-if="score >= 75">良好</p>
        <p v-else-if="score >= 60">及格</p>
        <p v-else>不及格</p>
        <input type="text" v-model="score">
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el: '#app',
            data: {
               score: 90  // 优秀 良好 及格 不及格
            }
        });
    </script>
    ```