vue基础 v-for的基础使用、阻止默认事件、event的传值等操作

Vue 变异方法
push() 接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度
pop() 从数组末尾移除最后一项，减少数组的length值，然后返回移除的项
shift() 移除数组中的第一个项并返回该项，同时数组的长度减1
unshift() 在数组前端添加任意个项并返回新数组长度
splice() 删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员
sort() 调用每个数组项的toString()方法，然后比较得到的字符串排序，返回经过排序之后的数组
reverse() 用于反转数组的顺序，返回经过排序之后的数组

非变异方法
concat() 先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。
slice() 基于当前数组中一个或多个项创建一个新数组，接受一个或两个参数，即要返回项的起始和结束位置，最后返回新数组。
map() 对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组、
filter() 对数组中的每一项运行给定函数，该函数会返回true的项组成的数组

使用案例链接：https://blog.csdn.net/weixin_39517183/article/details/106797380

 

<template>
    <div>
        <!-- <p v-once>{{count}}</p>  v-once是一次性数据不会更新-->
       <p >{{count}}</p>
       <!-- 函数传值，$event是默认存在的属性，当有了第一个值5的时候，必须手动写传$event -->
       <button @click="CountAdd(5,$event)">增加</button>
       <div>
           <!--  -->
           <input type="text" placeholder="请输入要加入的图书" ref="content">
           <input type="button"  @click="addbook" value="增加图书">
     
       </div>
        
       <ol>
           <!-- 此时@click 实现的点击谁都会在console.log 显示出结果 -->
           <li @click="booknames(item)" v-for="(item,index) in booklist" :key='index'>
               {{item}}
           </li>
       </ol>
       <button @click='updateobj'>按钮</button>
       <p v-for="(item,index) in obj" :key="index">
             {{item}}   
       </p>
       <!-- @click.prevent 阻止默认跳转事件 -->
        <a @click.prevent href="https://www.baidu.com">百度官方网站</a>

    </div>
</template>
<script>



  export default{
      name:"APIDemo",
      data() {
          return {
            count:0,
            booklist:['小说','情感','八卦','试题'],
            obj:{name:'nick',age:'24'},
          }
      },
      methods:{
          CountAdd:function(num,event){
              console.log(event)
             this.count+=num
          },
          addbook:function(){
             this.booklist.push(this.$refs.content.value)
          },
          updateobj:function(){
            // 对象增加属性以及属性值
              this.$set(this.obj,"sex",'男')
          },
          booknames:function(name){
              console.log(name)
          }
      }
  }
</script>