vuejs响应用户事件如点击事件

需求：

页面上的列表原先有3个，我们想点击一次添加一条记录，也可以在头和尾删除数据；

我们也可以删除我们想删除的任意一行记录；

如果是用传统的jquery操作，页面中js会特别多，而且操作也很麻烦。

这里用vue.js就非常简单。

我们先看页面效果：

页面初始化.png

末尾增加一项.png

删除项.png

再来看代码：

demo04

<div class="container mt15" id="ul-lists">
<ul class="list-group" v-for="item in items">
<li class="list-group-item">
<span class="label label-default label-pill pull-right" v-on:click="removeTodo($index)">×
{{item.text}} {{$index}}

<script src="../js/base/vue.js">
<script src="../js/base/jquery.min.js">
<script src="../js/base/bootstrap.min.js">