vue.js 實現(xiàn)輸入框動態(tài)添加功能
更新時間：2018年06月25日 10:55:07 作者：加油TG
這篇文章主要介紹了vue.js 實現(xiàn)輸入框動態(tài)添加功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-demo</title>
</head>
<body>
<div id="app">
<p> {{title}}</p>
<p v-if='showSub'> {{subTitle}}</p>
<div>
<input type="text" v-model="mytodo">
<button @click='handleClick'>添加，修改</button>
</div>
<ul>
<li v-for='todo in todos'>{{todo}}</li>
</ul>
</div>
<!-- built files will be auto injected -->
</body>
</html>
上面是index.html
用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定，v-model 會根據(jù)控件類型自動選取正確的方法來更新元素。
簡單地說：當在輸入框輸入“你好”時，在main.js 文件里面的mytodo的值就變成了：'你好‘。
當我點擊添加修改按鈕的時候，通過事件綁定，執(zhí)行main.js 文件里面的 handleClick ()方法，
通過： this.todos.push(this.mytodo);
向
todos:[
'吃飯',
'睡覺',
'寫代碼'
]
添加“你好”。
通過
<ul>
<li v-for='todo in todos'>{{todo}}</li>
</ul>
渲染出來。
然后又通過this.mytodo = '';
使得輸入框變?yōu)榭铡?/p>
下面看main.js
new Vue({
el:"#app",
data:{
title:'hello vuejs',
subTitle:'Vue React Angular is good',
showSub:true,
mytodo:'',
todos:[
'吃飯',
'睡覺',
'寫代碼'
]
},
methods:{
handleClick(){
// push() 添加方法
this.todos.push(this.mytodo);
this.mytodo = '';
this.title = '您好，小程序';
}
}
}
)
運行截圖：
總結(jié)
以上所述是小編給大家介紹的vue.js 實現(xiàn)輸入框動態(tài)添加功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue + Webpack + Vue-loader學(xué)習(xí)教程之相關(guān)配置篇
這篇文章主要介紹了關(guān)于Vue + Webpack + Vue-loader的相關(guān)配置篇，文中通過示例代碼介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
實現(xiàn)暗黑主題的方式有很多種,也有很多成型的框架可以直接使用,下面這篇文章主要給大家介紹了關(guān)于基于vue3&element-plus的暗黑模式的相關(guān)資料,需要的朋友可以參考下2022-12-12
其實采用vueUse中的useVirtualList方法同樣可以實現(xiàn)虛擬列表,這篇文章小編就來和大家詳細介紹一下如何使用vueUse實現(xiàn)簡單的虛擬列表效果吧2024-04-04
vue3中如何使用Pinia實現(xiàn)數(shù)據(jù)持久化操作
使用vue3中的pinia,我們可以在多個頁面間共享數(shù)據(jù),但是一旦我們關(guān)閉或刷新頁面,這些數(shù)據(jù)就會丟失,因此,我們需要有一種數(shù)據(jù)持久化的解決方案,下面我們就來看看具體如何解決的吧2023-10-10
眾所周知vue是操作dom元素的,那么如果有元素要動態(tài)綁定樣式,這種需求,還是要通過改變數(shù)據(jù)來改變視圖的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue動態(tài)樣式綁定的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要給大家介紹了關(guān)于vue源碼之批量異步更新策略的相關(guān)資料，關(guān)于vue異步更新是我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到的一個功能，需要的朋友可以參考下2021-05-05
vue實現(xiàn)tab切換的3種方式及切換保持數(shù)據(jù)狀態(tài)
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)tab切換的3種方式及切換保持數(shù)據(jù)狀態(tài)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
因為vantUI給的圖標非常少,為了滿足自己的需求,就應(yīng)該找到一種方法來向vant添加自己自定義的圖標,對于自定義圖標我第一時間想到的就是阿里的iconfont矢量圖庫,這篇文章主要給大家介紹了關(guān)于vant自定義引入iconfont圖標及字體的方法步驟,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關(guān)于vue前端更新后需要清空緩存的相關(guān)資料,文中通過代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2024-10-10
本文主要介紹了Vue+Element的后臺管理框架，在框架上，領(lǐng)導(dǎo)要用AdminLTE這套模板，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09