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

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

這篇文章主要介紹了vue.js 實(shí)現(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ù)控件類型自動選取正確的方法來更新元素。

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

當(dāng)我點(diǎn)擊添加修改按鈕的時候，通過事件綁定，執(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)輸入框動態(tài)添加功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue利用History記錄上一頁面的數(shù)據(jù)方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue利用History記錄上一頁面的數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-11-11
vue 修改 data 數(shù)據(jù)問題并實(shí)時顯示操作
這篇文章主要介紹了vue 修改 data 數(shù)據(jù)問題并實(shí)時顯示操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue實(shí)現(xiàn)上拉加載下一頁效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)上拉加載下一頁效果，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下
2022-08-08
基于Vuex無法觀察到值變化的解決方法
下面小編就為大家分享一篇基于Vuex無法觀察到值變化的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue3中require報錯require is not defined問題及解決
這篇文章主要介紹了vue3中require報錯require is not defined問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
基于Vue中使用節(jié)流Lodash throttle詳解
今天小編就為大家分享一篇基于Vue中使用節(jié)流Lodash throttle詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
vue組件間通信全面講解
這篇文章主要介紹了vue組件間通信全面講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Ant Design Vue 添加區(qū)分中英文的長度校驗(yàn)功能
這篇文章主要介紹了Ant Design Vue 添加區(qū)分中英文的長度校驗(yàn)功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下功能，
2020-01-01
教你用vue實(shí)現(xiàn)一個有趣的圍繞圓弧動畫效果
最近做的兩個項(xiàng)目都是關(guān)于vue的,做完整理一下,這篇文章主要給大家介紹了關(guān)于如何用vue實(shí)現(xiàn)一個有趣的圍繞圓弧動畫效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
vue 地圖可視化 maptalks 篇實(shí)例代碼詳解
這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2019-05-05