新增
- 生成列表結(jié)構(gòu)(v-for 數(shù)組)
- 獲取用戶輸入(v-model)
- 回車,新增數(shù)據(jù)(v-on .enter添加數(shù)據(jù))
<!-- main area -->
<section id="todoapp">
<!-- input -->
<header class="header">
<h1>NOTE</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="input todo task" class="new-todo">
</header>
<!-- list -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class>
<span class="index">{{ index + 1 }}.</span>
<label>{{ item }}</label>
<button class="destroy"></button>
</div>
</li>
</ul>
</section>
<!-- 統(tǒng)計和清空 -->
<footer class="footer">
</footer>
</section>
<!-- bottom -->
<footer class="info">
</footer>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:'#todoapp',
data:{
list:[
'code',
'eat',
'sleep'
],
inputValue:'study'
},
methods:{
add:function () {
this.list.push(this.inputValue);
}
}
})
</script>
刪除
- 點擊刪除指定內(nèi)容(v-on splice 索引)
- 數(shù)據(jù)改變,和數(shù)據(jù)綁定的元素同步改變
- 事件的自定義參數(shù)
<body>
<!-- main area -->
<section id="todoapp">
<!-- input -->
<header class="header">
<h1>NOTE</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="input todo task" class="new-todo">
</header>
<!-- list -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class>
<span class="index">{{ index + 1 }}.</span>
<label>{{ item }}</label>
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 統(tǒng)計和清空 -->
<footer class="footer">
</footer>
</section>
<!-- bottom -->
<footer class="info">
</footer>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:'#todoapp',
data:{
list:[
'code',
'eat',
'sleep'
],
inputValue:'study'
},
methods:{
add:function () {
this.list.push(this.inputValue);
},
remove:function (index) {
this.list.splice(index,1);
}
}
})
</script>
</body>
統(tǒng)計和清空
- 統(tǒng)計信息個數(shù)(v-text length)
- 基于數(shù)據(jù)的開發(fā)方式
- 點擊清空所有信息(v-on)
<body>
<!-- main area -->
<section id="todoapp">
<!-- input -->
<header class="header">
<h1>NOTE</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="input todo task" class="new-todo">
</header>
<!-- list -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class>
<span class="index">{{ index + 1 }}.</span>
<label>{{ item }}</label>
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 統(tǒng)計和清空 -->
<footer class="footer">
<span class="todo-count">
<strong>{{ list.length }}</strong> items left
</span>
<button class="clear-completed" @click="removeAll">
clear
</button>
</footer>
</section>
<!-- bottom -->
<footer class="info">
</footer>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:'#todoapp',
data:{
list:[
'code',
'eat',
'sleep'
],
inputValue:'study'
},
methods:{
add:function () {
this.list.push(this.inputValue);
},
remove:function (index) {
this.list.splice(index,1);
},
removeAll:function () {
// this.list.splice(index);
this.list = []
}
}
})
</script>
</body>
隱藏
- 沒有數(shù)據(jù)時 隱藏元素(v-show v-if 數(shù)組非空)
- 列表結(jié)構(gòu)可以通過v-for指令結(jié)合數(shù)據(jù)生成
- v-on結(jié)合事件修飾符可以對事件進行限制 比如.enter
- v-on在綁定事件時 可以傳遞自定義參數(shù)
- 通過v-model可以快速的設(shè)置和獲取表單元素的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<style>
</style>
</head>
<body>
<!-- main area -->
<section id="todoapp">
<!-- input -->
<header class="header">
<h1>NOTE</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="input todo task" class="new-todo">
</header>
<!-- list -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class>
<span class="index">{{ index + 1 }}.</span>
<label>{{ item }}</label>
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 統(tǒng)計和清空 -->
<footer class="footer">
<span class="todo-count" v-if="list.length != 0">
<strong>{{ list.length }}</strong> items left
</span>
<button v-show="list.length != 0" class="clear-completed" @click="removeAll">
clear
</button>
</footer>
</section>
<!-- bottom -->
<footer class="info">
</footer>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:'#todoapp',
data:{
list:[
'code',
'eat',
'sleep'
],
inputValue:'study'
},
methods:{
add:function () {
this.list.push(this.inputValue);
},
remove:function (index) {
this.list.splice(index,1);
},
removeAll:function () {
// this.list.splice(index);
this.list = []
}
}
})
</script>
</body>
</html>
