Vue 響應式渲染 - 待辦事項簡單實現

Vue 漸進式JavaScript 框架基于Vue2的學習筆記 - Vue 響應式渲染 - 待辦事項簡單實現

待辦事項簡單實現

頁面初始化

雙向綁定的指令

增加留言列表設置

增加刪除按鈕

最后優化

總結

待辦事項簡單實現

頁面初始化

對頁面進行vue的引入、創建輸入框和按鈕及實例化Vue。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../lib/vue.js"></script>
</head>
<body>
<div id="box"><input type="text" /><button>Add</button>
</div>
<script>new Vue({el: "#box", // element})
</script>
</body>
</html>

雙向綁定的指令

使用v-model對input元素進行雙向綁定，并在按鈕上設置點擊事件。

V-model只能綁定在表單元素上。

示例如下：

<div id="box"><input type="text" v-model="mytext"/><button @click="handelAdd()">Add</button>
</div>
<script>new Vue({el: "#box", // elementdata:{mytext:'今日任務'},methods:{handelAdd() {console.log('點擊add按鈕')}}})
</script>

增加留言列表設置

設置ul元素用以渲染留言列表數據。

并在點擊事件中對留言列表數據通過push方式增加。

示例如下：

<div id="box"><input type="text" v-model="mytext"/><button @click="handelAdd()">Add</button><ul><li v-for="item in datalist">{{item}}</li></ul>
</div>
<script>new Vue({el: "#box", // elementdata:{mytext:'今日任務',datalist:["第一件事", "第二件事", "第三件事"]},methods:{handelAdd() {console.log('點擊add按鈕')this.datalist.push(this.mytext)}}})
</script>
<div id="box"><input type="text" v-model="mytext"/><button @click="handelAdd()">Add</button><ul><li v-for="item in datalist">{{item}}</li></ul>
</div>
<script>new Vue({el: "#box", // elementdata:{mytext:'今日任務',datalist:["第一件事", "第二件事", "第三件事"]},methods:{handelAdd() {console.log('點擊add按鈕')this.datalist.push(this.mytext)}}})
</script>

實現效果：

增加刪除按鈕

在原來基礎上增加刪除已完成的事件或留言功能。

示例如下：

<li v-for="item in datalist">{{item}}<button>Del</button>
</li>

按鈕綁定刪除事件

示例如下：

<li v-for="(item, index) in datalist">{{item}}<button @click="handelDel(index)">Del</button>
</li>

刪除事件處理

示例如下：

handelDel(index) {this.datalist.splice(index, 1)
}

最后優化

通過判斷datalist顯示和隱藏列表和提示。

示例如下：

<div id="box"><input type="text" v-model="mytext"/><button @click="handelAdd()">Add</button><div v-show="!datalist.length">待辦事項暫時沒有了，快添加吧！</div><ul v-show="datalist.length"><li v-for="(item, index) in datalist">{{item}}<button @click="handelDel(index)">Del</button></li></ul>
</div>
<script>new Vue({el: "#box", // elementdata:{mytext:'今日任務',datalist:["第一件事", "第二件事", "第三件事"]},methods:{handelAdd() {console.log('點擊add按鈕')this.datalist.push(this.mytext)// 置空mytext內容this.mytext = ''},handelDel(index) {this.datalist.splice(index, 1)}}})
</script>

最終效果：

總結

Vue 漸進式JavaScript 框架基于Vue2的學習筆記 - Vue 響應式渲染 - 待辦事項簡單實現

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/67354.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/67354.shtml
英文地址，請注明出處：http://en.pswp.cn/web/67354.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！