v-for 循环遍历（点击DOM获取数据）

最新推荐文章于 2024-08-28 18:19:04 发布

黑色咖啡 Ken

最新推荐文章于 2024-08-28 18:19:04 发布

阅读量2.7k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/a4561614/article/details/81020117

版权

Vue 专栏收录该内容

72 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>v-for 循环遍历（点击DOM获取数据）</title>
  </head>
  <body>
  <div class="app">
    <ol>
      <li v-for="(v,index) in toolts" v-bind:id="index" v-bind:title="v.title" v-on:click='click_fun($event,index,v.title)'>
        {{parentMessage}}---{{v.id}}---{{v.title}}
      </li>
    </ol>

  </div>
  </body>
  <script src="js/vue.js" charset="utf-8"></script>
  <script type="text/javascript">

     var vm=new Vue({
          el:'.app',
          data:{
            parentMessage:'网站',
            toolts:[//定义数据
              {id:0,title:'头部',kejian:true},
              {id:1,title:'中间',kejian:true},
              {id:2,title:'底部',kejian:true}
            ]
          },
          methods:{//方法对象
           click_fun:function($event,index,title){//点击
              console.log($event);//MouseEvent {isTrusted: true, screenX: 147, screenY: 146, clientX: 147, clientY: 53, …}
              console.log(index);//1
              console.log(title);//中间
           }
         }

     });

      //***控制台输出**//
     //网站---0---头部
     //网站---1---中间
     //网站---2---底部

  </script>
</html>