需求:
页面上的列表原先有3个,我们想点击一次添加一条记录,也可以在头和尾删除数据;
如果是用传统的jquery操作,页面中js会特别多,而且操作也很麻烦。
这里用vue.js就非常简单。
我们先看页面效果:
页面初始化.png
末尾增加一项.png
删除项.png
再来看代码:
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<Meta http-equiv="x-ua-compatible" content="ie=edge">
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">