vue+element绑定事件使用

vue+element绑定事件使用

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

  1. button绑定点击事件

<el-button type="danger"  :data-id=123  v-on:click="clickItem($event)">>点击按钮</el-button>

<script src="/newv1statics/js/elementui/vue.js"></script>
<script src="/newv1statics/js/elementui/elementui.js"></script>

 <script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                items: []
            }
        },
        methods: {
        clickItem(e){
            //获取自定义属性
            id = e.currentTarget.dataset.id;
            console.log(id)
        }
        }
    });
 </script>

  2.  v-for 绑定点击事件

<el-col :span="4" v-for="(o,index) in items" :key="index" :class="`list-item-${index}`" >
    <el-card class="box-card" style="width:100%;">
        <div slot="header" class="clearfix">
           <span style="color:#409EFF;font-size:18px;" @click="handleClick(o.username)">{{ o.trueName }}</span>
        </div>
    </el-card>   
</el-col>

<script src="/newv1statics/js/elementui/vue.js"></script>
<script src="/newv1statics/js/elementui/elementui.js"></script>
 <script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                items: []
            }
        },
        methods: {
            handleClick(admin) {
                console.log('handleClick>>>', admin);
            }
        }
    });
 </script>