vue簡易記事本開發(fā)詳解
更新時間：2021年06月25日 11:29:07 作者：一個愛前端開發(fā)的小朋友
這篇文章主要為大家詳細(xì)介紹了vue簡易記事本的開發(fā)過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(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="請輸入任務(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>
運行效果截圖
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，本文通過實例給大家介紹了vue入門教程適用小白初學(xué)者，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-04-04
Vue+Echarts報錯Cannot?set?properties?of?undefined?(settin
這篇文章主要介紹了Vue+Echarts報錯Cannot?set?properties?of?undefined?(setting?‘plate‘)的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
使用vue實現(xiàn)grid-layout功能實例代碼
這篇文章主要介紹了使用vue實現(xiàn)grid-layout功能的代碼講解,需要的朋友可以參考下2018-01-01
計算屬性是Vue中比較好用的API，開發(fā)者可以利用計算屬將復(fù)雜的計算進(jìn)行緩存，同時基于它的響應(yīng)式特性，我們無需關(guān)注數(shù)據(jù)更新問題，但需要注意的是，計算屬性是惰性求值的，本文將詳細(xì)介紹計算屬性的實現(xiàn)原理,需要的朋友可以參考下2023-05-05
本篇文章主要介紹了Vue.js 2.0 如何使用axios，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了Vue之Computed依賴收集與更新原理分析,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了VUE項目中調(diào)用高德地圖的全流程講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
學(xué)習(xí)過?vue2?的寶子們肯定知道，組件傳值是?vue?項目開發(fā)過程中必不可少的功能場景，在?vue2?里面有很多傳值的方式。今天就來和大家講講Vue3的組件傳值方式，需要的可以參考一下2022-07-07
vue預(yù)覽 pdf、word、xls、ppt、txt文件的實現(xiàn)方法
這篇文章主要介紹了vue預(yù)覽 pdf、word、xls、ppt、txt文件的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了如何在Vue3中使用jsx/tsx的相關(guān)知識,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,需要的小伙伴可以了解下2024-02-02