运行效果如下：
<!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>
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
