025——VUE中事件的基本使用与VUE中差异

VUE事件处理与列表渲染

weixin_34186931

于 2017-12-26 07:27:00 发布

阅读量41

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yiweiyihang/p/8116221.html

本文介绍如何在VUE中使用事件处理方法，并通过示例展示了如何在列表渲染时绑定点击事件来移除列表项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的基本使用与VUE中差异</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="hdcms">
    <li v-for="(v,k) in comments">
        {{v.id}}---{{v.content}}
        <!-- @ 等同于 v-on: -->
        <button @click="remove(v.id)">删除</button>
    </li>
</div>
<script>
    var app = new Vue({
        el: '#hdcms',
        data: {
            comments: [
                {id:1,content: "后盾人"},
                {id:3,content: "老师"}
            ]
        },
//        事件处理方法必须写在methods中
        methods: {
            remove(k){
                console.log(k);
            }
        }
    });
</script>

</body>
</html>

转载于:https://www.cnblogs.com/yiweiyihang/p/8116221.html