谷粒商城32 - 前端基础 VUE- 指令 v-on v-for v-if v-show

文章目录

v-on 示例

事件修饰符
按键修饰符
组合按键

v-for 示例

显示user信息
遍历对象信息
加上:key来区分不同数据

v-if & v-show

v-if & v-show 代码示例
v-else-if
v-if 与v-for的结合使用

v-on 示例

v-on示例点赞

<body>
    <div id="app">
                
        <!--事件中直接写js片段-->
        <button v-on:click="num++">点赞</button>
        <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
        <button @click="cancle">取消</button>
        <!--  -->
        <h1>有{{num}}个赞</h1>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                num: 1
            },
            methods:{
                cancle(){
                    this.num--;
                    if(this.num<0){
                        this.num=0;
                    }
                  
                }
            }
        })
    </script>
</body>

效果如图所示 . 点击点赞, 数量加一, 点击取消, 数量减一

v-on:click 与 @click 用法相同.

事件修饰符

div 嵌套如下 div中嵌套一个 div

   <!-- 事件修饰符 -->
<div style="border: 1px solid red;padding: 20px;" v-on:click="hello">
    大div
    <div style="border: 1px solid blue;padding: 20px;" @click="hello">
        小div <br />
        <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
    </div>
</div>

  <script>
        new Vue({
            el:"#app",
            data:{
                num: 1
            },
                hello(){
                    alert("点击了")
                }
            }
        })
    </script>

大div和小div中都注册了点击事件 @click. 在vue中注册了 hello方法, 用于给出提示.
点击小div区域, 会弹出两次alert框.

此现象称之为 事件冒泡

阻止事件冒泡, 可以用stop.
上面的html部分可以修改如下, 把小div中的点击事件中, 加上 stop

   <div style="border: 1px solid red;padding: 20px;" v-on:click="hello">
            大div
            <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
                小div <br />
                <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
            </div>
        </div>

再次到页面上进行点击, 可以看到只会出现一次弹框

阻止默认行为

例子: 阻止a标签的跳转网页的默认行为.
使用@click.prevent
代码示例如下

  <div style="border: 1px solid red;padding: 20px;" v-on:click="hello">
            大div
            <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
                小div <br />
                <a href="http://www.baidu.com" @click.prevent>去百度</a>
            </div>
        </div>

效果如下, 点击去百度, 只会出现弹框, 不会跳转到百度

也可以进行方法的注册, 例如弹框的方法注册 . 但这样写会有冒泡问题,

阻止默认行为并且阻止冒泡的写法

<div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
     小div <br />
     <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
 </div>

大div只能点击一次的写法 . 使用v-on:click.once

 <div id="app">
        <!-- 事件修饰符 -->
        <div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
            大div
            <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
                小div <br />
                <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
            </div>
        </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            methods:{
                hello(){
                    alert("点击了")
                }
            }
        })
    </script>
</body>

效果如下, 点击大div的区域, 只会出现一次弹框, 再次点击不会有反应

按键修饰符

按键修饰符
按键的别名

实现需求:
按方向键的上 , 点赞数量加2 , 方向键的下, 点赞数减二
v-on:keyup.up 对方向键的上进行注册
@keyup.down 对方向键的下进行注册

 <div id="app">
                
        <!--事件中直接写js片段-->
        <button v-on:click="num++">点赞</button>
        <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
        <button @click="cancle">取消</button>
        <!--  -->
        <h1>有{{num}}个赞</h1>

        <!-- 按键修饰符：  -->
        <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" ><br />

        提示：

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                num: 1
            },
            methods:{
                cancle(){
                    this.num--;
                    if(this.num<0){
                        this.num=0;
                    }
                }
            }
        })
    </script>
</body>

实现的效果如下, 当光标在输入框的时候, 方向键上加2 , 方向键下减二

组合按键

实现效果, 按住ctrl和鼠标点击的时候, 把点赞数变成10.
将上一节中的代码改成如下
@click.ctrl="num=10" 就代表按住ctrl和鼠标点击的时候, 把点赞数变成10

   <!-- 按键修饰符：   -->
        <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br />

v-for 示例

显示user信息

<body>

    <div id="app">
        <ul>
            <!-- <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'"> -->

            <li v-for="(user) in users">
                <!-- 1、显示user信息：v-for="item in items" -->
               {{user.name}}  ==>   {{user.gender}} ==>{{user.age}} <br>
            </li>
        </ul>

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>         
        let app = new Vue({
            el: "#app",
            data: {
                users: [{ name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }],
                nums: [1,2,3,4,4]
            },
        })
    </script>
</body>

实现的效果如图所示 , 遍历出了user对象的属性

遍历的同时, 获取索引. 将上面的代码修改如下


<li v-for="(user,index) in users">
     <!-- 1、显示user信息：v-for="item in items" -->
    当前索引：{{index}} ==> {{user.name}}  ==>   {{user.gender}} ==>{{user.age}} <br>
 </li>

显示如下

遍历对象信息

遍历数组的同时, 遍历对象的信息,
如下的代码中 , 就是遍历对象的信息
<span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}}；</span>
其中v,k,i ,分别代表的是值, 键, 索引.
注意 ,值在前面, 键在后面, 与Java的Hashmap相反

<body>
    <div id="app">
        <ul>
            <li v-for="(user,index) in users">
                对象信息：
                <span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}}；</span>
               
            </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>         
        let app = new Vue({
            el: "#app",
            data: {
                users: [{ name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }],
                nums: [1,2,3,4,4]
            },
        })
    </script>
</body>

效果如下.

加上:key来区分不同数据

遍历的时候都加上:key来区分不同数据，提高vue渲染效率
:key 后面一般为唯一的值, 在实际项目中, 一般用id , 在此示例中, 可以name.
如下:key="user.name"

<body>
    <div id="app">
        <ul>
         <!-- 遍历的时候都加上:key来区分不同数据，提高vue渲染效率 -->
         <li v-for="(user,index) in users" :key="user.name">
            {{user.name}}  ==>   {{user.gender}} ==>{{user.age}} <br>
         </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>         
        let app = new Vue({
            el: "#app",
            data: {
                users: [{ name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }]
            },
        })
    </script>
</body>

效果如图

v-if & v-show

v-if & v-show 代码示例

设置一个按钮, 点击了按钮, 是否显示取反值.

<body>
    <!-- 
        v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
        v-show，当得到结果为true时，所在的元素才会被显示。 
    -->
    <div id="app">
        <button v-on:click="show = !show">点我呀</button>
        <!-- 1、使用v-if显示 -->
        <h1 v-if="show">if=看到我....</h1>
        <!-- 2、使用v-show显示 -->
        <h1 v-show="show">show=看到我</h1>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script> 
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                show: true
            }
        })
    </script>
</body>

效果如下, 一开始if 和show都显示

点击了点我呀, 之后, 页面都没有显示了 . 但是通过代码可以看到 v-show=“show” 是通过css样式去控制是否显示的. 而v-if="show"是直接把整个dom清除了. 因此最好用v-show提高页面渲染效率 .

v-else-if

v-else-if 的用法与Java的if else类似. 多条件判断
代码示例
生成随机数, 动态的判断随机数的大小去显示内容

<body>
    <div id="app">
        <button v-on:click="random=Math.random()">点我呀</button>
        <span>{{random}}</span>

        <h1 v-if="random>=0.75">
            看到我啦？！ &gt;= 0.75
        </h1>

        <h1 v-else-if="random>=0.5">
            看到我啦？！ &gt;= 0.5
        </h1>

        <h1 v-else-if="random>=0.2">
            看到我啦？！ &gt;= 0.2
        </h1>

        <h1 v-else>
            看到我啦？！ &lt; 0.2
        </h1>

    </div>


    <script src="../node_modules/vue/dist/vue.js"></script>
        
    <script>         
        let app = new Vue({
            el: "#app",
            data: { random: 1 }
        })     
    </script>
</body>

效果如图所示 , 点击按钮, 生成不同的数字, 显示不同的内容

v-if 与v-for的结合使用

例如在上面的v-for的中 , 只遍历显示男生.
判断条件的优先级是低于v-for的
写法如下
<li v-for="(user,index) in users" :key="user.name" v-if="user.gender =='男'">

<body>

    <div id="app">
        <ul>
            <li v-for="(user,index) in users" :key="user.name" v-if="user.gender =='男'">
               {{user.name}}  ==>   {{user.gender}} ==>{{user.age}} <br>
            </li>

            
        </ul>

        <ul>
            <li v-for="(num,index) in nums" :key="index"></li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>         
        let app = new Vue({
            el: "#app",
            data: {
                users: [{ name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }]
            },
        })
    </script>
</body>

效果如图所示, 只显示了男生,