Vue本地应用——显示切换，属性绑定

最新推荐文章于 2024-09-13 14:34:15 发布

林带鱼QAQ

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量407

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45738743/article/details/135586203

版权

文章介绍了Vue.js中的v-show、v-if和v-bind指令，分别用于元素的条件显示、隐藏和属性绑定。通过实例展示了如何使用这些指令实现图片轮转和元素状态切换，强调了在不同场景下的选择和性能优化。

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

显示切换，属性绑定用到的命令有：

v-show
v-if
v-bind

v-show

根据表达式的真假，切换元素的显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show指令</title>
</head>
<body>
    <div id="app">
        <img src="shaosiming.jpg" v-show="isShow">
        <button @click="changeIsShow">点击切换显示状态</button>
        <img src="shaosiming.jpg" v-show="age>=18">
        <button @click="changeAge">点击增加年龄进行显示</button>
        <button @click="changeAge2">点击减少年龄进行隐藏</button>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                age:17
            },
            methods:{
                changeIsShow:function(){
                    this.isShow = !this.isShow
                },
                changeAge:function(){
                    this.age++
                },
                changeAge2:function(){
                    this.age=17
                }
            }
        })
    </script>
</body>
</html>

v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对元素显示状态会同步更新

v-if

根据表达式的真假，切换元素的显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if指令</title>
</head>
<body>
    <div id="app">
        <button @click="changeIsShow">点击切换显示</button>
        <p v-if="isShow">天下武功，唯快不破！</p>
        <button @click="changeTemperature">点击隐藏温度</button>
        <button @click="changeTemperature2">点击显示温度</button>
        <p v-show="temperature>30">热死了！！！</p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                temperature:20
            },
            methods:{
                changeIsShow:function(){
                    this.isShow = !this.isShow
                },
                changeTemperature:function(){
                    this.temperature = 20
                },
                changeTemperature2:function(){
                    this.temperature = 35
                }
            }
        })
    </script>
</body>
</html>

v-if指令的作用是：根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除
频繁切换v-show，反之使用v-if，前者切换的消耗较小

v-bind

设置元素的属性（比如：src，title，class）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind指令</title>
    <style>
        .active{
            border:10px  solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc">
        <br>
        <img :src="imgSrc" :title="imgTitle+'!!!!'" :class="isActive?'active':''" @click="changeActive">
        <br>
        <img :src="imgSrc" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="changeActive">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"shaosiming.jpg",
                imgTitle:"少司命",
                isActive:false
            },
            methods:{
                changeActive:function(){
                    this.isActive = !this.isActive
                }
            }
        })
    </script>
</body>
</html>

v-bind指令的作用是：为元素绑定属性
完整写法是，v-bind：属性名
简写的话可以直接省略v-bind，只保留 ：属性名
需要动态的增删class建议使用对象的方式

实例运用

实现网页上的图片轮转
在这里插入图片描述
用上述指令实现图片轮转的步骤：

1.定义图片数组
2.添加图片索引
3.绑定src属性
4.图片切换逻辑
5.显示状态切换

程序清单

<!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>图片切换</title>
    <link rel="stylesheet" href="./css/index.css" />
</head>
<body>
    <div id="mask">
        <div class="center">
            <img :src="imgArr[index]">
            <!--左箭头-->
          <!-- <a href="javascript:void(0)" class="left"
            v-show="index!=0" @click="prev">
                <img src="./imgs/prev.jpg" > 
            </a> -->
            <a href="javascript:void(0)" class="left"
            v-if="index!=0" @click="prev">
                <img src="./imgs/prev.jpg" > 
            </a> 
            <!--右箭头-->
            <a href="javascript:void(0)" class="right" 
            v-show="index<imgArr.length-1" @click="next">
                <img src="./imgs/next.jpg"> 
            </a> 
        </div>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var mask = new Vue({
             el:"#mask",
             data:{
                 imgArr:[
                     "./imgs/01.jpg",
                     "./imgs/02.jpg",
                     "./imgs/03.jpg",
                     "./imgs/04.jpg"
                 ],
                 index:0
             },
             methods:{
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
             }
         })
     </script>
</body>
</html>