vue+element绑定事件使用

vue+element绑定事件使用

  有时候需要写亿点点前端页面，vue+element搭配是个不错的选择，因为使用还不太熟练，将一些常用的操作记录下来。

  1. button绑定点击事件

 1 <el-button type="danger"  :data-id=123  v-on:click="clickItem($event)">>点击按钮</el-button>
 2 
 3 <script src="/newv1statics/js/elementui/vue.js"></script>
 4 <script src="/newv1statics/js/elementui/elementui.js"></script>
 5 
 6  <script>
 7     let vm = new Vue({
 8         el: '#app',
 9         data() {
10             return {
11                 items: []
12             }
13         },
14         methods: {
15         clickItem(e){
16             //获取自定义属性
17             id = e.currentTarget.dataset.id;
18             console.log(id)
19         }
20         }
21     });
22  </script>

  2.  v-for 绑定点击事件

 1 <el-col :span="4" v-for="(o,index) in items" :key="index" :class="`list-item-${index}`" >
 2     <el-card class="box-card" style="width:100%;">
 3         <div slot="header" class="clearfix">
 4            <span style="color:#409EFF;font-size:18px;" @click="handleClick(o.username)">{{ o.trueName }}</span>
 5         </div>
 6     </el-card>   
 7 </el-col>
 8 
 9 <script src="/newv1statics/js/elementui/vue.js"></script>
10 <script src="/newv1statics/js/elementui/elementui.js"></script>
11  <script>
12     let vm = new Vue({
13         el: '#app',
14         data() {
15             return {
16                 items: []
17             }
18         },
19         methods: {
20             handleClick(admin) {
21                 console.log('handleClick>>>', admin);
22             }
23         }
24     });
25  </script>

 

posted @ 2023-06-21 17:03  欢乐豆123  阅读(261)  评论(0)  编辑  收藏  举报