vue学习笔记day02-6.26-按键修饰符,v-for,v-if-else

无双幽梦
208 阅读3分钟

按键修饰符

在监听键盘事件时,我们经常需要检查详细的按键

vue允许为v-on在监听键盘事件时添加按键修饰符 键盘事件的关键字为keydown(按键按下),keyup(按键抬起)

//常用的按键修饰符

  .enter => // enter键
    .tab => // tab键
    .delete (捕获“删除”和“退格”按键) => // 删除键
    .esc => // 取消键
    .space => // 空格键
    .up => // 上
    .down => // 下
    .left => // 左
    .right => // 右

    <!-- enter  enter按下触发事件 -->
    请输入用户名<input type="text" @keydown.enter="handelUsername()" v-model="username"><br>
    请输入密码<input type="password" @keydown.enter="handelPassword()" v-model="password"><br>
    <button @click="handelButton()">{{msg}}</button><br>
    <!-- delete -->
    delete <input type="text" @keydown.delete="handelDelete"><br>
    <!-- esc   tab   space -->
    esc <input type="text" @keydown.esc="handelEsc"><br>
    table <input type="text" @keydown.tab="handelTab"><br>
    space <input type="text" @keydown.space="handelSpace"><br><br>
    <!-- up  down  left  right -->
    up <input type="text" @keydown.up="handelUp"><br>
    down <input type="text" @keydown.down="handelDown"><br>
    left <input type="text" @keydown.left="handelLeft"><br>
    right <input type="text" @keydown.right="handelRight"><br><br>

    <script>
    let vm = new Vue({
    el: '#app',
    data: {
      msg: '提交',
      username: '',
      password: '',
    },
    methods: {
      handelUsername() {
        console.log('用户名提交');
      },
      handelPassword() {
        console.log('密码提交');
      },
      handelButton() {
        console.log('提交数据');
      },
      handelDelete() {
        console.log('正在删除中');
      },
      handelEsc(){
        console.log('触发esc');
      },
      handelTab(){
        console.log('触发tab');
      },
      handelSpace(){
        console.log('触发space');
      },
      handelUp(){
        console.log('触发up');
      },
      handelDown(){
        console.log('触发down');
      },
      handelLeft(){
        console.log('触发left');
      },
      handelRight(){
        console.log('触发right');
      }
    }
  })
</script>

v-show 控制display-显示/隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./练习/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-show="flag">1231213154546454</div>
        <button @click="handelChick">点击</button>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                flag:true
            },
            methods:{
                handelChick(){
                    this.flag = !this.flag
                }
            }
        })
    </script>
</body>
</html>

v-for遍历

v-for遍历JSON数组

<!-- 遍历json数组 -->
        <div>
            <ul>
                <!-- item 元素的每一项   index 下标值 -->
                <li v-for="(item,index) in eatArr">
                    <p>{{index}}--{{item.name}}--{{item.weidao}}--{{item.place}}</p>
                </li>
            </ul>
        </div>

   let vm = new Vue({
            el: '#app',
            data: {
                eatArr: [
                    { name: '烤鱼', weidao: '还可以', place: '济南' },
                    { name: '炸鸡', weidao: '一般般', place: '上海' },
                    { name: '啤酒', weidao: '还行吧', place: '青岛' },
                    { name: '老村长', weidao: '辣嗓子', place: '北京' },
                ],

v-for遍历数字

v-for可以遍历数字,在in前面使用一个变量来储存当前的次数

注意:此变量会从1开始,而不是从0开始

<!-- v-for 遍历数字 -->
        <div v-for="num in 9">{{num}}</div>

v-for循环普通数组

<!-- v-for 循环普通数组 -->
<div v-for="item in arr">{{item}}</div>

  arr:['苹果','香蕉','西瓜','火龙果'],

v-for 循环对象

v-for遍历对象时,根据变量数量不同,保存的内容也不同

  如果是一个变量,那么保存的是对象中的属性值
  v-for="item in obj"  item是属性值

  如果是两个变量,那么第一个变量保存属性值,第二个变量保存属性名
  v-for="(item,key) in obj"  item是属性值  key是属性名

  如果是三个变量,那么第一个变量保存属性值,第二个变量保存属性名,第三个变量保存下标值
  v-for="(item,key,index) in obj"  item是属性值  key是属性名 index是下标值

<!-- v-for 循环对象 -->
<!-- 第一个值value是键名  第二个值key是键名  第三个值index是下标值 -->
<div v-for="(value,key,index) in obj">{{value}}--{{key}}--{{index}}</div>

  obj:{
    name:'张三',
      age:'28',
      hotel:'北京'
  },

案例: 计算

<!-- 案例 --计算 -->
<input type="text" v-model="A">
<input type="text" v-model="B">
  <button @click="add()">计算结果</button>
    <span>{{result}}</span>

  let vm = new Vue({
    el: '#app',
    data: {
      A:'',
      B:'',
      result:''
    }, 
    methods:{
      add(){
        this.result=parseInt(this.A) + parseInt(this.B)
        //需要注意,结果需要转换为数字计算,因为是字符串,不转换只会进行拼接
      }
    }

v-bind 绑定

在vue中 v-bind指令用于响应更新HTML特性,通过v-bind可以将data中的属性绑定在跟组件上

通过绑定链接进行页面跳转

<!-- 直接使用无法正常跳转 -->
<a href="url">进入百度网页</a>

<!-- 需要使用v-bind才能正常跳转 -->
<a v-bind:href="url">进入百度网页</a>

let vm = new Vue({
   el: '#app',
  data: {
url:'https://www.baidu.com'            
}

可以使用简写的方式

<a v-bind:href="url">进入百度网页</a>
 //等于
<a :href="url">简写进入百度</a>

通过绑定样式使样式生效

<!-- 绑定class -->
  <div @click="change()" v-bind:class="{active:isActive,error:isError}">
    点击改变我的颜色吧</div>

  let vm = new Vue({
    el: '#app',
    data: {
      isActive: false,  //控制红色
      isError: true,  //控制蓝色
    },
    methods: {
      change() {  //点击时进行颜色的切换
        this.isActive = !this.isActive;
        this.isError = !this.isError
      }
    }
  })
    
  <style>
        .active{
            color: red;
        }
        .error{
            color: blue;
        }
    </style>

通过data的属性值来获取样式

<!-- 通过data的属性值来获取样式 -->
<div v-bind:style="{color:color,fontSize:fontSize+'px'}">修改我的颜色</div>

 let vm = new Vue({
    el: '#app',
    data: {
      color:'yellow',
      fontSize:36,
    }

通过style绑定一个对象,在对象里写样式

<!-- 通过style绑定一个对象,在对象里写样式 -->
<div v-bind:style="objStyle">修改我的颜色②</div>

  let vm = new Vue({
    el: '#app',
    data: {
      objStyle:{
        color:'pink',
        fontSize:'24px'
      }
    },

v-if

//设定一个场景,假设有n条数据,当数据小于x条时显示数据,当数据大于x条时显示一个图片

  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- v-if  是条件判断  符合条件显示一个页面,不符合条件显示另一个页面 -->
        <div v-if="this.arr.length<8">
            <ul>
                <li v-for="item in arr">{{item.name}}--{{item.age}}</li>
            </ul>
        </div>
        
        <div v-else> //需要注意,在这个案例中必须要加v-else
            <img src="../images/1.jpg" alt="">
        </div>
    </div>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                arr: [
                    { name: '张一', age: '21' },
                    { name: '张二', age: '22' },
                    { name: '张三', age: '23' },
                    { name: '张四', age: '24' },
                    { name: '张五', age: '25' },
                    { name: '张六', age: '26' },
                ]
            }
        })

    </script>
</body>

</html>

v-else-if

//还是设定一个场景,如果按照一个考试成绩评级,不同的分数显示不同的级别

  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-if="score>=90">优秀</div>
        <div v-else-if="score>=75 && score<90">良好</div>
        <div v-else-if="score>=60 && score<75">一般</div>
        <div v-else="score<60">不及格</div>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                score: '85'
            }
        })

    </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>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-show  v-for   v-bind  :    v-if v-else  v-else -if  -->
        <ul>
            <!-- 第一步 通过点击事件传index  让index等于当前在data里面赋的值 赋值状态是li第一个选中状态-->
            <li v-for="(item,index) in arr" @click="change(index)" :class="{active:index == num  }" :key="index">
                {{item}}</li>
        </ul>
        <!--v-show 如果当前状态和index下标是否相等 相等就会显示当前内容  -->
        <div v-for="(item,index) in arrData" v-show="index == num" :key="index">{{item}}</div>
    </div>
    <script>
        let vue = new Vue({
            el: '#app',
            data: {
                num: 0,
                arr: ['html', 'css', 'javascript', 'vue'],
                arrData: ['html内容', 'css内容', 'javascript内容', 'vue内容']
            },
            methods: {
                change(index) {
                    console.log(index)
                    this.num = index

                }
            }
        })
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 400px;
            height: 600px;
            border: 1px solid black;
        }

        #app ul {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-around;
            line-height: 50px;
            background: yellow;
            list-style: none;
        }

        #app ul li {
            width: 25%;
            text-align: center;
        }

        .active {
            background: red;
        }
    </style>
</body>

</html>

感谢伙伴们耐心观看,本文是个人的学习笔记,今年27岁转行前端程序员,笔记中如有错误还请指正,非常感谢! 如果本篇笔记能给你带来帮助,还请点个关注点个赞 感谢支持 您的支持也是我不断更新学习笔记的动力~

avatar
文章
阅读
粉丝