vue基础学习指令 V-on

小威编程

已于 2022-02-24 16:29:00 修改

阅读量828

点赞数 2

分类专栏： vue 文章标签： vue.js 学习 elementui

于 2022-02-24 16:27:43 首次发布

本文链接：https://blog.csdn.net/dawfwafaew/article/details/123114463

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

v-on是绑定事件（方法）的指令，v-on是单击效果的事件，

也是项目中常用到的！

使用绑定事件来做一个添加和删除用户的小demo

注意：@click是v-on:click的缩写

methods（方法）：中是写方法的

data中是写数据的

绑定键盘事件

你可以根据你的需求绑定自己的键盘事件（方法）

我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件。绑定事件写法：

//语法：v-on:keyup.要绑定的键盘按键名称="事件名称"
<input type="text" v-on:keyup.enter="onEnter" >

下面是全部程序代码：

<body>
    <div id="app">
 <table >
    <tr  >
        <td>编号</td>
        <td>姓名</td>
        <td>操作</td>
    </tr> 
    
    <tr v-for="user in userlist" :key="user.id">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td @click="remove">删除</td>
    </tr> </table>用户ID：
    <input type="text" v-model="id"><br>
 
    用户名称：<input type="text" v-model="username"><br>
    <button @click="adduser">添加</button>
    </div>
</body>
</html>
<script>
var vsm = new Vue({
el:"#app",
data:{
    userlist:[
        {id:1,name:"张三"},
        {id:2,name:"无为"},
        {id:3,name:"王斑"},
        
    ],
    id:5,
    username:""
},
methods:
{
adduser()
{
    //push往下添加
this.userlist.push({id:this.id++,name:this.username})
 
},
remove(index)
{
  this.userlist.splice(index,1)//删除索引后面一个id 的值
    // delete this.userlist[0];
    // this.$forceUpate();
}
 
}
 
 
});
 
</script>
<style>
    table{
        width: 600px;
        border-collapse:collapse ;
    }
    table td{
 
 
        border: 1px solid #000;
    }
</style>