快捷導(dǎo)航

vue.js 實(shí)現(xiàn)輸入框動(dòng)態(tài)添加功能

更新時(shí)間：2018年06月25日 10:55:07 作者：加油TG

這篇文章主要介紹了vue.js 實(shí)現(xiàn)輸入框動(dòng)態(tài)添加功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

代碼如下所示：

<!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 會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素。

簡(jiǎn)單地說：當(dāng)在輸入框輸入“你好”時(shí)，在main.js 文件里面的mytodo的值就變成了：'你好‘。

當(dāng)我點(diǎn)擊添加修改按鈕的時(shí)候，通過事件綁定，執(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 = '您好，小程序';
  }
 }
}
)

運(yùn)行截圖：

總結(jié)

以上所述是小編給大家介紹的vue.js 實(shí)現(xiàn)輸入框動(dòng)態(tài)添加功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue + Webpack + Vue-loader學(xué)習(xí)教程之相關(guān)配置篇
這篇文章主要介紹了關(guān)于Vue + Webpack + Vue-loader的相關(guān)配置篇，文中通過示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。
2017-03-03
基于vue3&element-plus的暗黑模式實(shí)例詳解
實(shí)現(xiàn)暗黑主題的方式有很多種,也有很多成型的框架可以直接使用,下面這篇文章主要給大家介紹了關(guān)于基于vue3&element-plus的暗黑模式的相關(guān)資料,需要的朋友可以參考下
2022-12-12
Vue使用三方工具vueUse實(shí)現(xiàn)虛擬列表
其實(shí)采用vueUse中的useVirtualList方法同樣可以實(shí)現(xiàn)虛擬列表,這篇文章小編就來和大家詳細(xì)介紹一下如何使用vueUse實(shí)現(xiàn)簡(jiǎn)單的虛擬列表效果吧
2024-04-04
vue3中如何使用Pinia實(shí)現(xiàn)數(shù)據(jù)持久化操作
使用vue3中的pinia,我們可以在多個(gè)頁(yè)面間共享數(shù)據(jù),但是一旦我們關(guān)閉或刷新頁(yè)面,這些數(shù)據(jù)就會(huì)丟失,因此,我們需要有一種數(shù)據(jù)持久化的解決方案,下面我們就來看看具體如何解決的吧
2023-10-10
Vue動(dòng)態(tài)樣式綁定實(shí)例詳解
眾所周知vue是操作dom元素的,那么如果有元素要?jiǎng)討B(tài)綁定樣式,這種需求,還是要通過改變數(shù)據(jù)來改變視圖的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)樣式綁定的相關(guān)資料,需要的朋友可以參考下
2023-04-04
vue源碼之批量異步更新策略的深入解析
這篇文章主要給大家介紹了關(guān)于vue源碼之批量異步更新策略的相關(guān)資料，關(guān)于vue異步更新是我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到的一個(gè)功能，需要的朋友可以參考下
2021-05-05
vue實(shí)現(xiàn)tab切換的3種方式及切換保持?jǐn)?shù)據(jù)狀態(tài)
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)tab切換的3種方式及切換保持?jǐn)?shù)據(jù)狀態(tài)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
vant自定義引入iconfont圖標(biāo)及字體的方法步驟
因?yàn)関antUI給的圖標(biāo)非常少,為了滿足自己的需求,就應(yīng)該找到一種方法來向vant添加自己自定義的圖標(biāo),對(duì)于自定義圖標(biāo)我第一時(shí)間想到的就是阿里的iconfont矢量圖庫(kù),這篇文章主要給大家介紹了關(guān)于vant自定義引入iconfont圖標(biāo)及字體的方法步驟,需要的朋友可以參考下
2023-09-09
vue前端更新后需要清空緩存代碼示例
這篇文章主要給大家介紹了關(guān)于vue前端更新后需要清空緩存的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-10-10
Vue+Element的后臺(tái)管理框架的整合實(shí)踐
本文主要介紹了Vue+Element的后臺(tái)管理框架，在框架上，領(lǐng)導(dǎo)要用AdminLTE這套模板，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09