代碼如下所示：
<!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 = '您好，小程序'; } }})運行截圖：
總結
以上所述是小編給大家介紹的vue.js 實現(xiàn)輸入框動態(tài)添加功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
