vue小白教程-3 本地应用指令中（v-show、v-if、v-bind）

程序员文章站 2024-02-16 12:25:46

...

vue指令可以分为：

●内容绑定，事件绑定

●显示切换，属性绑定

●列表循环，表单元素绑定

4.v-show

根据表达值的真假，切换元素的显示与隐藏，指令后面内容最终都会解析为布尔值 true显示 false隐藏。

5.v-if

和v-show几乎同用法，

点击按钮切换显示状态的代码如下:

vue小白教程-3 本地应用指令中（v-show、v-if、v-bind）

v-show与v-if比较：

v-show操纵样式而v-if操纵dom数，

因dom数对性能影响很大，所以频繁切换用v-show不频繁时用v-if

6.v-bind

用于设置元素属性

写法：v-bind属性名 //v-bind也可省略

最后以点击图片切换为例综合使用以上指令

首先分析：1.用一个数组装图片地址

2.点击箭头图片，数组的下标要有相应变化（@click）

3.左右两个箭头在首尾要有隐藏（用v-show）

分析完毕 vue小白教程-3 本地应用指令中（v-show、v-if、v-bind）下面代码实现：

<!DOCTYPE html>
<html lang ="en">
<head>
    <meta charset="UFT-8">
    <meta name = "viewport" comtent ="width=device-width,initial-scale=1.0" >
    <meta http-equiv ="X-UA-Compatible" Content = "ie=edge">
    <title>实例：点击切换图片</title>
</head>

<body>
    <div id="mask">
        <div class="center">
           <!--left arrow-->
           <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left" >
            <img src="./img/lear.jpg" alt="" height="200" >
           </a>
           
            <!--picture-->
           <img :src="imgArr[index]" alt=""/>
           
           <!--right arrow-->
           <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
               <img src="./img/riar.jpg" alt="" height="200">
           </a>
        </div>
    </div>

    <script  src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#mask",
        data:{
            imgArr:["./img/1.png",
                    "./img/2.jpg",
                    "./img/3.jpg",
                    "./img/4.jpg",
                    "./img/5.jpg",
            ],
            index:0
        },
        methods:{
            prev:function(){
                this.index--;
            },
            next:function(){
                this.index++;
            }
        }
        })
    </script>
</body>
</html>

实现的结果如下：

vue小白教程-3 本地应用指令中（v-show、v-if、v-bind）