个人笔记-----Vue怎么玩，Vue就是这么玩【如有不对，欢迎指正】

詩酒趁年华

于 2019-05-10 12:51:33 发布

阅读量425

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/sinat_42664398/article/details/90056063

版权

vue 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了如何在Vue.js中使用v-for指令来渲染列表，并通过setData方法动态填充数据。同时，演示了如何利用事件对象e进行事件处理，包括获取当前DOM节点和自定义属性的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请求数据

请求数据后在 <ul> 标签中渲染出来，
先定义一个空的数组 list:[] ，
然后循环这个空数组 <li v-for="(item,index) in list" :key="index">{{item}}</li> ，
再给list:[]这个空数组赋值，先用 for 循环模拟下，再使用 this.list.push() 进行赋值。

<button @click="setData()">请求数据</button>
<ul>
	<li v-for="(item,index) in list" :key="index">{{item}}----{{index}}</li>
</ul>


export default {
  data () {   // 业务逻辑里面定义的数据
    return {
      list:[]
    }
  },
  methods: {
    setData(){
      for (var i = 0; i < 10; i++) {
        this.list.push('这是第'+i+'条数据');
      }
    }
  },
}

执行方法传值

   <button @click="setUrl('123')">执行方法传值</button>


   setUrl(val){
     alert(val)      //123
   }

事件对象

事件对象可以获取当前 DOM 节点，srcElement 就是获取当前 DOM 节点。
获取自定义属性的值 e.srcElement.dataset.aid ，可以进行传值。

	<button data-aid="123456" @click="eventFn($event)">事件对象</button>

	eventFn(e){
      console.log(e);
      e.srcElement.innerText = '改变后的button';
      console.log(e.srcElement.dataset.aid);      
    }