Vue實(shí)現(xiàn)簡(jiǎn)易記事本
更新時(shí)間：2022年04月11日 10:59:51 作者：webWangGe
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易記事本，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)簡(jiǎn)易記事本的具體代碼，供大家參考，具體內(nèi)容如下
預(yù)覽圖：
功能如下：
（1）輸入任務(wù)并按下回車鍵，可將任務(wù)添加至任務(wù)列表（不可輸入重復(fù)任務(wù)）
（2）點(diǎn)擊刪除，可刪除對(duì)應(yīng)任務(wù)
（3）點(diǎn)擊清空，所有任務(wù)都會(huì)被刪除
（4）左下角同步顯示任務(wù)總數(shù)
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
?
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>記事本</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
?
? ? ? ? #todoapp {
? ? ? ? ? ? width: 600px;
? ? ? ? ? ? background-color: rgba(19, 161, 114, 0.63);
? ? ? ? ? ? font-family: sans-serif;
? ? ? ? }
?
? ? ? ? .header>h1 {
? ? ? ? ? ? padding: 20px 0;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? font-size: 40px;
? ? ? ? ? ? color: whitesmoke;
? ? ? ? }
?
?
? ? ? ? .newTask {
? ? ? ? ? ? display: block;
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? line-height: 50px;
? ? ? ? ? ? padding-left: 10px;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? outline: none;
? ? ? ? ? ? border: none;
? ? ? ? }
?
? ? ? ? .todolist li {
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? padding-left: 15px;
? ? ? ? ? ? margin: 10px 0;
? ? ? ? ? ? font-size: 25px;
? ? ? ? ? ? color: white;
? ? ? ? }
?
? ? ? ? .todolist .item {
? ? ? ? ? ? margin-left: 15px;
? ? ? ? }
?
? ? ? ? .destroy,
? ? ? ? .clear {
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? float: right;
? ? ? ? ? ? color: white;
? ? ? ? ? ? background-color: transparent;
? ? ? ? ? ? border: none;
? ? ? ? ? ? font-size: 20px;
? ? ? ? }
?
? ? ? ? .footer {
? ? ? ? ? ? width: 600px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? padding: 10px 0;
? ? ? ? ? ? vertical-align: middle;
? ? ? ? }
?
?
? ? ? ? .footer p {
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? padding-left: 15px;
? ? ? ? ? ? color: white;
? ? ? ? ? ? font-size: 20px;
? ? ? ? }
? ? </style>
</head>
?
<body>
? ? <section id="todoapp">
? ? ? ? <header class="header">
? ? ? ? ? ? <h1>記事本</h1>
? ? ? ? ? ? <input type="text" v-model="newItem" class="newTask" placeholder="請(qǐng)輸入任務(wù)" @keyup.enter="add">
? ? ? ? </header>
? ? ? ? <section>
? ? ? ? ? ? <ul class="todolist">
? ? ? ? ? ? ? ? <li v-for="(item, index) in list">
? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? <span>{{ index + 1 }}</span>
? ? ? ? ? ? ? ? ? ? ? ? <label class="item">{{ item }}</label>
? ? ? ? ? ? ? ? ? ? ? ? <button class="destroy" @click="del(index)">刪除</button>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? </ul>
? ? ? ? </section>
? ? ? ? <footer class="footer">
? ? ? ? ? ? <p class="count">
? ? ? ? ? ? ? ? items: {{ list.length }}
? ? ? ? ? ? </p>
? ? ? ? ? ? <button class="clear" @click="clear" v-show="list.length != 0">清空</button>
? ? ? ? </footer>
? ? </section>
? ? <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
? ? <script>
? ? ? ? const app = new Vue({
? ? ? ? ? ? el: "#todoapp",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? list: [],
? ? ? ? ? ? ? ? newItem: ""
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? add() {
? ? ? ? ? ? ? ? ? ? if (this.newItem == "") {
? ? ? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else {
? ? ? ? ? ? ? ? ? ? ? ? if (!this.list.includes(this.newItem)) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.list.push(this.newItem);
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.newItem = "";
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? alert("請(qǐng)勿添加重復(fù)事件！");
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.newItem = "";
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? del(index) {
? ? ? ? ? ? ? ? ? ? this.list.splice(index, 1);
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? clear() {
? ? ? ? ? ? ? ? ? ? this.list = [];
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
?
</html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定詳細(xì)講解
這篇文章主要介紹了Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01
vue.js實(shí)現(xiàn)會(huì)動(dòng)的簡(jiǎn)歷(包含底部導(dǎo)航功能，編輯功能)
這篇文章主要介紹了vue.js實(shí)現(xiàn)一個(gè)會(huì)動(dòng)的簡(jiǎn)歷(包含底部導(dǎo)航功能，編輯功能),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue js with語(yǔ)句原理及用法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
vue.js集成echarts時(shí)遇到的一些問(wèn)題總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue.js集成echarts遇到的一些問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue3如何解決路由緩存問(wèn)題(響應(yīng)路由參數(shù)的變化)
這篇文章主要介紹了Vue3如何解決路由緩存問(wèn)題(響應(yīng)路由參數(shù)的變化),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
關(guān)于vue-cli3+webpack熱更新失效及解決
這篇文章主要介紹了關(guān)于vue-cli3+webpack熱更新失效及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue結(jié)合g6實(shí)現(xiàn)樹(shù)級(jí)結(jié)構(gòu)(compactBox?緊湊樹(shù))
本文主要介紹了vue結(jié)合g6實(shí)現(xiàn)樹(shù)級(jí)結(jié)構(gòu)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
使用Vue3實(shí)現(xiàn)羊了個(gè)羊的算法
這篇文章主要介紹了使用Vue3實(shí)現(xiàn)羊了個(gè)羊的算法,初始化的隨機(jī)位置算法，通過(guò)實(shí)例代碼介紹了計(jì)算偏移量的方法，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue詳細(xì)的入門筆記，對(duì)Vue感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要介紹了如何在vue中使用HTML 5 拖放API，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01