vue簡(jiǎn)易記事本開發(fā)詳解
更新時(shí)間：2021年06月25日 11:29:07 作者：一個(gè)愛前端開發(fā)的小朋友
這篇文章主要為大家詳細(xì)介紹了vue簡(jiǎn)易記事本的開發(fā)過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)易記事本的具體代碼，供大家參考，具體內(nèi)容如下
css代碼
#todoapp {
margin: 0 400px;
width: 600px;
background-color: gray;
text-align: center;
}
.content {
margin:0px 100px;
}
.todo {
margin: 10px;
text-align: left;
background-color:green;
}
.btn {
float: right;
background-color: lawngreen;
}
.clear{
background-color: lightseagreen;
}
.list{
margin-left: 10px;
}
html代碼加js代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css" >
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="todoapp">
<div class="header">
<h1>小黑記事本</h1>
<input type="text" v-model="inputValue" placeholder="請(qǐng)輸入任務(wù)"> <button @click="add">添加</button>
</div>
<div class="content">
<ul class="todolist" v-for="(item,index) in list">
<div class="todo">
<span class="index">{{index+1}}</span><label class="list">{{item}}</label><button class="btn" @click="remove(index)">刪除</button>
</div>
</ul>
</div>
<div>
<button @click="clearBoth" class="clear">全部清除</button>
</div>
</div>
<script>
var app = new Vue({
el:"#todoapp",
data: {
list:["吃飯飯","打游戲","吃西瓜"],
inputValue:""
},
methods: {
remove:function(index){
this.list.splice(index,1)
},
add: function () {
this.list.push(this.inputValue)
},
clearBoth:function(){
this.list.splice(0,this.list.length)
}
}
})
</script>
</body>
</html>
運(yùn)行效果截圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
今天小編就為大家分享一篇vue data引入本地圖片的兩種方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-11-11
通過vue.extend實(shí)現(xiàn)消息提示彈框的方法記錄
這篇文章主要給大家介紹了關(guān)于通過vue.extend實(shí)現(xiàn)消息提示彈框的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要為大家詳細(xì)介紹了Vue3+Ts如何實(shí)現(xiàn)緩存,用戶搜索詞本地排名,延遲消費(fèi)或者消息隊(duì)列,用戶簽到和鎖,以及接口限流,還有全局ID等功能,需要的可以參考下2024-03-03
這篇文章主要為大家介紹了Vue?router?路由守衛(wèi)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
這篇文章主要介紹了vue中使用ts配置的具體步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue 接口請(qǐng)求地址前綴本地開發(fā)和線上開發(fā)設(shè)置方式
這篇文章主要介紹了vue 接口請(qǐng)求地址前綴本地開發(fā)和線上開發(fā)設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-08-08
這篇文章主要介紹了Vue中獲取this.$refs為undefined的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue實(shí)現(xiàn)循環(huán)切換動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)切換動(dòng)畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了vue操作dom并為dom增加點(diǎn)擊事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
基于Vue3定制復(fù)雜組件滾動(dòng)條的實(shí)現(xiàn)
這篇文章主要介紹了如何利用vue3定制復(fù)雜組件的滾動(dòng)條，文中通過示例代碼講解詳細(xì)，需要的朋友們下面就跟隨小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04