Vue简单指令

最新推荐文章于 2024-09-30 14:28:41 发布

品茶观山

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量688

点赞数 15

文章标签： vue.js

本文链接：https://blog.csdn.net/r1031953160/article/details/136855263

版权

本文详细介绍了Vue.js中的各种指令，包括v-html、v-show/v-if、v-else/v-else-if、v-on事件监听、v-bind动态属性、v-for循环、v-model双向数据绑定，以及指令修饰符的使用。通过实例展示了如何在实际应用中灵活运用这些指令，如图片切换、图书管理、事件参数传递等。

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

Vue指令

指令：带有 v- 前缀的特殊标签属性

<!--Vue指令: V- 前缀的标签属性-->
<div v-htnl="str"></div>

<!--普通标签属性-->
<div class="box">……</div>
<div title="小张">……</div>/div>

v-html

作用：设置元素的 innerHTML（innerHTML属性允许更改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">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-html="msg"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                msg:`
                <a href="https://wwww.baidu.com">
                    跳转到百度
                </a>
                `
            }
        })
    </script>
</body>
</html>

v-show 和 v-if

v-show

（1）作用：控制元素显示隐藏

（2）语法：v-show ="表达式" 表达式 true 显示，false 隐藏

（3）底层原理：切换 css 的 display ：none 来控制显示隐藏

（4）场景：频繁切换显示隐藏的场景

v-if

（1）作用：控制元素显示隐藏（条件渲染）

（2）语法：v-if ="表达式" 表达式 true 显示，false 隐藏

（3）底层逻辑：根据判断条件控制元素的创建和移除

（4）场景：要么显示，要么隐藏，不频繁切换的场景

<!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>
        .box{
            height: 100px;
            width: 300px;
            border: 5px solid black;
            border-radius: 20px;
            align-content: space-evenly;
            text-align: center;
            border-radius: 5px;
            box-shadow: 2px 2px 2px #ccc;
        }
    </style>
</head>
<body>
    <!--
         v-show 底层原理：切换 css 的 display ：none 来控制显示隐藏
         v-if 底层逻辑：根据 判断条件 控制元素的 创建 和 移除
    -->

    <div id="ignore">
        <div v-show="flag" class="box">v-show 控制的盒子</div>
        <div v-if="flag" class="box">v-if 控制的盒子</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const ignore =new Vue({
            el:'#ignore',
            data:{
                flag:false
            }
        })
    </script>
</body>
</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>
    <style>
        .box{
            height: 150px;
            width: 300px;
            background-color: #ff0707;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-show="aim" class="box">盒子</div>
        <div v-if="aim">
            <button @click="aim--">点击隐藏</button>
        </div>
        <div v-if="aim-1">
            <button @click="aim++">点击显示</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app =new Vue({
            el:'#app',
            data:{
                aim:1,
            }
        })
    </script>
</body>
</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>
    <style>
        .box{
            height: 150px;
            width: 300px;
            background-color: #ff0707;
        }
        .box1{
            height: 150px;
            width:300px;
            background-color: #06f30e;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-show="show==1" class="box">红盒子</div>
        <di