您的位置：首页 > 产品设计 > UI/UE

vue.js添加删除内容demo

2017-04-27 10:20 351 查看

运行效果如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>demo</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
<style>
.add-text{
width:200px;
height: 28px;
padding:0 10px;
}
.con{
width: 100%;
overflow: hidden;
}
.con li{
width:100%;
height: 30px;
}
.con li span{
display: inline-block;
width:300px;
}
.add-btn{
width: 80px;
height: 24px;
}
</style>
</head>
<body>
<div id="app">
<input class="add-text" v-model="newTodo" placeholder="请输入想输入的内容">
<ul class="con">
<li v-for="todo in todos">
<span>{{ todo.text }}</span>
<button v-on:click="removeTodo($index)">删除</button>
</li>
</ul>
<button class="add-btn" @click="addTodo">添加</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
newTodo: '',
todos: [
{ text: '有梦想虽然不一定能实现' } ,
{ text: '没梦想怎么能谈实现与否？' }
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim() ;
if (text) {
this.todos.push({ text: text }) ;
this.newTodo = '' ;
}
},

removeTodo: function (index) {
this.todos.splice(index, 1) ;
}
}
});

</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航