v-for 获取数组key value_Vue之路 | 05von、vif、vfor

点击左上方“ 熊吱 ”关注我们吧！

1

事件监听

    在开发中，需要监听用户发生的事件，如点击、拖拽、键盘操作等，在Vue中，使用v-on指令绑定事件监听器。

v-on的语法糖为：@

• v-on基本操作

    在下面代码中，使用了v-on语法(使用的是语法糖@)绑定了一个点击事件，事件指向了一个methods中定义的函数：

    <div id="app">      <h1>{{message}}h1>      <h2>{{counter}}h2>    <button @click='inc'>+button>    <button @click='sub'>-button>    div>    <script>    const app = new Vue({      el:'#app',      data:{        message:'欢迎光临！请选择您要购买的数量',        counter:0      },      methods:{        inc(){          this.counter++        },        sub(){          this.counter--        }      }    })script>

• v-on参数

    有下列三种情况：

情况1：方法不需要传参

情况2：若方法本省需要。一个参数，没有传入参数，只写了一个()，形参为Undifiened；如果省略了小括号，vue会将默认的浏览器产生的event事件对象作为参数传入到方法。

情况3：需要event对象同时也需要其他参数时，需要使用$event 手动获取浏览器参数的event对象。

代码示例如下：

    <div id="app">            <button @click='btn1click'>按钮1button>      <button @click='btn1click()'>按钮1button><br>            <button @click='btn2click(123)'>按钮2button>      <button @click='btn2click()'>按钮2button>      <button @click='btn2click'>按钮2button><br>            <button @click='btn3click(123,$event)'>按钮3button>    div>    <script>    const app = new Vue({      el:'#app',      data:{        message:'hello'      },      methods:{        btn1click(){          console.log('点击了按钮1')        },        btn2click(value){          console.log('点击了按钮2,参数为：'+ value)        },        btn3click(value,event){          console.log('点击了按钮3，参数为'+value)          console.log(event)        }      }    })script>

    依次点击按钮的效果输出：

• v-on修饰符

    某些情况下拿到event事件可以通过修饰符进行一些事件的处理，Vue中常用的一些修饰符如下：

(1).stop -调用event.stopPropagation()

    使用stop修饰符可以停止事件的冒泡，比如在下列代码中，没有使用stop修饰符时，点击按钮时会触发btnclick以及divclick，使用后，就只触发当前的btnclick：

    <div id="app">      <div @click='divclick'>        一个div        <button @click.stop='btnclick'>按钮1button>      div>    div>

(2).prevent -调用event.preventDefault()

    使用prevent修饰符可以阻止事件的默认行为，比如在一个表单的提交按钮上，可以通过添加prevent阻止默认的跳转动作：

      <form action="www.baidu.com">        <input type="submit" value="提交" @click.prevent='sbmclick'>      form>    div>

(3).{keyCode | keyAlias} -只当事件是从特定键触发时才触发回调

    比如通过如下方法，监听是否敲下回车键：

  <input @keyup.enter='onEnter'>

(4)除此之外还有一些修饰符:

.native -监听组件根元素的原生事件

.once -只触发一次回调

2

条件判断

• v-if、v-else-if、e-else

    在vue中也支持使用v-if、v-else-if、v-else进行条件判断：

    <div id="app">    <h2 v-if='score>=90'>优秀h2>    <h2 v-else-if='score>=80'>良好h2>    <h2 v-else-if='score>=60'>及格h2>    <h2 v-else='score>0'>不及格h2>    div>

    一个登录切换框的实现：

    <div id="app">      <span v-if='isUser'>        <label for="username">{{message}}label>      <input type="text" id="username" placeholder="请输入用户账号" key='username'>      span>      <span v-else>        <label for='email'>{{email}}label>        <input type="text" id="email" placeholder="请输入用户邮箱" key='email'>      span>    <button @click='isUser = !isUser'>切换类型button>    div>    <script>    const app = new Vue({      el:'#app',      data:{        message:'用户账号',        email:'用户邮箱',        isUser:true      }    })script>

其中输入框中的key值是否相同决定是否复用组件。

• v-show

两者的区别：

v-if：当条件为false时，dom中不会存在包含v-if指令的元素。

v-show：当条件为false时，v-show只是在元素中加了一个行内样式display:none

在开发中，切片很频繁时，使用v-show

代码示例：

    <div id="app">      <h2 v-if='isShow'>{{message}}h2>      <h2 v-show='isShow'>{{message}}h2>div>    <script>    const app = new Vue({      el:'#app',      data:{        message:'hello',        isShow:true      }    })script>

3

循环语句

    在实例中定义一个数组与一个对象：

    <script>    const app = new Vue({      el:'#app',      data:{        arr:['XuanYi','MeiQi','ChaoYue'],        obj:{          name: '熊吱',          age:20,          egname:'BearMouth'        }      }    })script>

• 遍历数组

    可通过以下方法遍历数组：

      <ul>        <li v-for="itm in arr">{{itm}}li>      ul>      <ul>        <li v-for="(itm,index) in arr">{{itm}}--{{index}}li>      ul>

    输出效果：

• 遍历对象

    可通过以下方法遍历对象：

      <ul>        <li v-for='value in obj'>{{value}}li>      ul>      <ul>                <li v-for='(value,key) in obj'>{{value}}--{{key}}li>      ul>      <ul>                <li v-for='(value,key,index) in obj'>{{value}}--{{key}}--{{index}}li>      ul>

    输出效果：

• key绑定

    为了高效的更新虚拟DOM：

    官方推荐在使用v-for时给对应的元素或组件绑定一个唯一的:key属性

      <ul>        <li v-for="itm in arr" :key='itm'>{{itm}}li>      ul>

    这个和Vue的虚拟DOM的Diff算法有关，使用key给每个节点做一个唯一标识，Diff算法就可以正确识别此节点，就能找到正确的位置插入新的节点。

• 响应式的数组方法

1. push() 在数组后添加元素2. pop() 删除数组最后一个元素3. shift() 在删除数组中的第一个元素4. unshift() 在数组最前面添加元素5. splice()   - 删除(开始元素，删除元素个数)  - 插入(开始元素，0，插入元素)  - 替换元素(开始元素，替换元素个数，替换元素)6. sort() 排序元素7. reverse() 反转元素

    

    以上列举了vue中响应式的数组方法(页面会直接改变)，如果需要修改数组的元素，直接通过索引值修改是非响应式的，vue中也提供了一个set函数来修改数组元素：

Vue.set(要修改的对象，索引值，修改后的值)

END Vue之路系列文章： Vue之路 | 01-Vue安装与初体验 Vue之路 | 02-VSCODE添加Vue模板 Vue之路 | 03-插值操作与V-bind Vue之路 | 04-计算属性computed

微信：熊吱

扫码关注我们

互联网知识交流平台

你的每个赞和在看，我都喜欢！