vue實現(xiàn)記事本功能
更新時間：2021年06月24日 14:58:12 作者：zy6648
這篇文章主要為大家詳細介紹了vue實現(xiàn)記事本功能，記事本可以進行添加刪除事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)記事本功能的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>記事本</title>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" >
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-6 ">
<h1 class="text-succeed">{{title}}</h1>
<input type="text" name="text" placeholder="填寫事務" v-model="newThing"/>
<button type="button" class="btn text-active" v-on:click="addThing" v-on:keyup.enter="addThing">添加事務</button>
</div>
</div>
<div class="row">
<div class="col-md-3 ">
<div class="thumbnail">
<ul>
<li v-for="(item,index) in things" class="text-center text-info" v-show="item.show">{{item.thing}}
<button class="btn btn-default bg-info" v-on:click="removeThing(index)" v-model="index">刪除</button></li>
</ul>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var vue=new Vue({
el:'#app',
data:{
title: '記事本',
things:[
{
thing:'',
show:false
}
],
newThing:'',
message:'待填寫的事務為空?。?
},
methods:{
addThing:function(){
if(this.newThing){
this.things.splice(0,0,{
thing:this.newThing,
show:true
});
this.newThing=''
}else{
alert(this.message)
}
},
removeThing:function(index){
this.things[index].show=false
}
}
});
</script>
</html>
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue 簡單配置公用接口地址方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了詳解Vue Cli瀏覽器兼容性實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要介紹了快速解決element的autofocus失效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue插槽,是學習vue中必不可少的一節(jié),越來越發(fā)現(xiàn)插槽的好用,而過濾數(shù)據(jù)也是我們?nèi)粘ｉ_發(fā)中必然會用到的,這篇文章主要給大家介紹了關(guān)于Vue插槽和過濾器的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue.js使用3DES加密的方法,結(jié)合實例形式分析了vue.js使用3DES加密的具體操作步驟與使用技巧,并提供了CryptoJS-v3.1.2的本地下載,需要的朋友可以參考下2018-05-05
Vue?Router路由hash模式與history模式詳細介紹
Vue?Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁面應用變得易如反掌。路由實際上就是可以理解為指向，就是我在頁面上點擊一個按鈕需要跳轉(zhuǎn)到對應的頁面，這就是路由跳轉(zhuǎn)2022-08-08
淺談vue后臺管理系統(tǒng)權(quán)限控制思考與實踐
這篇文章主要介紹了淺談vue后臺管理系統(tǒng)權(quán)限控制思考與實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟
這篇文章主要介紹了vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
WebStorm是一款優(yōu)秀的前端開發(fā)IDE,之前一直可以調(diào)試Vue項目,下面這篇文章主要給大家介紹了關(guān)于使用Webstorm調(diào)試Vue代碼的詳細圖文教程,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細介紹了Vue使用高德地圖實現(xiàn)城市定位，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08