Vue v-for循环之@click点击事件获取元素

女爷i 2022-02-27 16:42 340阅读 0赞

### **应用背景** ###

浏览论坛的贴子（数据库的数据通过vue遍历在html页面上）

点击帖子的标题、图片，可以查看详细的帖子（点击事件获取id）

--------------------

**1、设置一个隐藏值的放置Id的div，点击div就获取id，传参到后台（点击一部分）**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <table>
        <tr v-for="site in sites">
    		<td @click="link($event)">{
       { site.id }}</td><td>{
       { site.name }}</td><td>{
       { site.num }}</td><td>{
       { site.sex }}</td>
        </tr>
      </table>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        sites: [
          {id:01, name: '小米' ,num: '中国',sex: '女'},
         {id:02, name: '斋藤' ,num: '日本',sex: '男'},
         {id:03, name: '帕广' ,num: '缅甸',sex: '人妖'}
        ]
      },
    	methods: {
        link(e){
    	alert(e.currentTarget.innerHTML );
        }
      },
    })
    </script>
    </body>
    </html>

**2、在图片上添加点击事件，把id传进去**

@click一般都是获取这个点击的

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <table>
        <tr v-for="site in sites" @click="link(site.num)">
    		<td>{
       { site.name }}</td><td>{
       { site.num }}</td><td>{
       { site.sex }}</td>
        </tr>
      </table>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        sites: [
          { name: '1' ,num: '中国',sex: '女'},
         { name: '2' ,num: '日本',sex: '男'},
         { name: '3' ,num: '缅甸',sex: '人妖'}
        ]
      },
    	methods: {
        link(db){
    	alert(db);
        }
      },
    })
    </script>
    </body>
    </html>

--------------------

使用场景不同，优势不同