课时39 前端基础-Vue-指令-v-on、v-for、v-if

最新推荐文章于 2024-01-09 11:17:14 发布

一只小灰灰

最新推荐文章于 2024-01-09 11:17:14 发布

阅读量126

点赞数

分类专栏：谷粒商城学习笔记

本文链接：https://blog.csdn.net/weixin_44543578/article/details/115273687

版权

谷粒商城学习笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求，尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节
为了解决这个问题，Vue.js为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
·‘stop’，阻止事件冒泡到父元素
·‘prevent’，阻止默认事件发生
·‘capture’：使用事件捕获模式
·‘self’：只有元素自身触发事件才执行
·‘once’：只执行一次

按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值。Vue允许为’v-on’在监听键盘事件时添加按键修饰符：

<!-- 只有在'keyCode'是13时调用'vm.submit()' -->
<input v-on:keyup.13="submit">

记住所有的’keyCode’比较困难，所以Vue为最常用的按键提供了别名

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：
·‘enter’
·‘tab’
·‘delete’（捕获"删除"和"退格"键）
·‘esc’
·‘space’
·‘up’
·‘down’
·‘left’
·‘right’

组合按钮
可以用如下修饰符来实现仅在按下响应按键时才触发鼠标或键盘事件的监听器
·‘ctrl’
·‘alt’
·‘shift’

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>tes1t1</title>
</head>

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

    <!-- 事件修饰符 -->
    <div style="border: 1px solid red;padding: 20px;" @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>

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

</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app", 
        data:{ 
           
            num: 1 
        },
        methods: {
            cancle(){
                this.num--;
            },
            hello(){
                alert("点击了")
            }
        },
    });
    
</script>
</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>tes1t1</title>
  </head>
  
  <body>
    <div id="app">
      <ul>
        <li v-for="(user, index) in users" :key="user.name">
          当前索引：{{index}} ==> {{user.name}} ==> {{user.gender}} ==> {{user.age}}<br>
          对象信息：
          <span v-for="(v, k, i) in user">{{k}} -- {{v}} -- {{i}} ==></span></span>

          <!-- 1、显示user信息：v-for="item in items" -->
          <!-- 2、获取数组下标：v-for="{item, index} in items" -->
          <!-- 3、遍历对象：
              v-for="value in object"
              v-for="(value, key) in object"
              v-for="(value, key, index) in object"
          -->
          <!-- 4、遍历的时候都加上：key来区分不同数据，提高vue渲染效率 -->
        </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:'小A', gender:'女', age: 21},
          {name:'小B', gender:'男', age: 22},
          {name:'小C', gender:'女', age: 15},
          {name:'小D', gender:'男', age: 10},
          {name:'小E', gender:'男', age: 25}],
          nums:[1,2,3,4]
        },
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>tes1t1</title>
</head>

<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 vm = new Vue({
        el:"#app", 
        data:{ 
            show: true
        }
    });
    
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>tes1t1</title>
</head>

<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>
        看到我啦？！ &gt;=0.2
    </h1>
</div>

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

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

一只小灰灰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
课时39 前端基础-Vue-指令-v-on、v-for、v-if

事件修饰符在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求，尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节为了解决这个问题，Vue.js为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。...
复制链接

扫一扫