當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue实现一个带搜索功能的列表_（Vue起步）2.模板指令：v-for / v-on / v-model

發布時間：2024/7/23 vue 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue实现一个带搜索功能的列表_（Vue起步）2.模板指令：v-for / v-on / v-model 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

①公眾號：王醬醬記
②記錄跟著文檔學習Vue的一些關鍵點，持續更新。感興趣的小白建議關注一下
③Vue當中有幾個常見的指令，看看是怎么用的，強烈建議你自己在編輯器里打一遍，你就更明白Vue為什么是數據驅動型的一款框架啦！

關鍵詞：v-for、 v-on 、v-model
實現需求：循環數據、綁定事件、數據的雙向綁定
了解：Vue.js 設計思想、Vue.js 的基礎語法
注意：v-on:click 用 @click代替

一、實現通過 input 框向“正在進行”的列表中增加列表項內容

使用：v-for 幫助去循環多行數據

//創建一個Vue實例，加上對應的 el 和 data 數據 //在dom元素加上vue的一個指令 v-for 用于循環多列數據<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>TodoList</title><script src='./vue.js'></script> </head> <body><div id = "app"><input type="text" /><button>提交</button><ul><li v-for="item in list">{{item}}</li></ul></div> <script>var app = new Vue ({el: '#app',data: {list: ['第一課內容' , '第二課內容' , '33333']}})</script></body> </html>

list：需要循環數據
item: 指的是循環過程中循環的每一項內容

假設，在list再任意假如一個字符串，如'33333' ，那么此時瀏覽器頁面上也會相應出現列表內容為 33333 的效果

二、實現在輸入框輸入內容提交后，提交功能出現彈出框效果

分析需求：點擊“提交”按鈕，需要用綁定事件實現
使用：v-on Vue 用于綁定事件的模板指令（如點擊事件，v-on:click="handleBtnClick"，這里的 handleBtnClick 是一個函數（一種方法），對應地在 Vue 實例中也要相應地映射這種方法）
注意：v-on:click 可以寫成 @click

<body><div id = "app"><input type="text" /><button v-on:click="handleBtnClick">提交</button><ul><li v-for="item in list">{{item}}</li></ul></div> <script>var app = new Vue ({el: '#app',data: {list: ['第一課內容' , '第二課內容' , '33333']},methods: {handleBtnClick : function(){alert('click')}}})</script> </body>

只要點擊 dom 元素中的 button ，就會執行 handleBtnClick 這個方法。而 Vue 的實例接管了頁面的 dom 元素，執行 handleBtnClick 則會自動到這個實例中對應地找到這個方法。

試一下：點擊頁面上的 “提交” ，會不會彈出含有 “click” 內容的彈窗

三、實現輸入內容，在頁面上展示輸入的內容

使用：v-model 用于實現數據的雙向綁定。它的值等于一個數據。

<body><div id = "app"><input type="text" v-model="inputValue"/><button v-on:click="handleBtnClick">提交</button><ul><li v-for="item in list">{{item}}</li></ul></div> <script>var app = new Vue ({el: '#app',data: {list: [],inputValue: ''},methods: {handleBtnClick : function(){alert('click')}}})</script> </body>

dom 元素里用 v-model 綁定數據。當 dom 元素中的內容發生變化時，Vue 實例中 data 數據中對應 v-model 的數據值也會相應地發生變化；反之，data 的對應數據值發生變化，頁面也會發生變化

試一下：控制臺測試一下 v-model 雙向的數據綁定效果吧（如圖）

四、實現在點擊“提交”后將input里的value值輸出展示在頁面中

實現需求： “提交” 和輸入進去的內容結合

試一下：輸入框空白時，點擊 “提交”，彈出空白內容框。輸入內容時，輸入框（頁面）數據變化，實例 data 中 inputValue 也跟著變化（數據的雙向綁定），點擊 “提交” ，彈出有內容框。

五、實現每當在輸入框中輸入東西，頁面列表中也會增加相應的東西

分析需求：先分析列表增加的方式就是在 data 中的 list 操作，每添加一個數據，就會在頁面出現一個列表；然后實現輸入框輸入值，使用 data 中的 inputValue 來代表每次輸入框輸入的值；點擊之后出結果

六、實現每次輸入完都清空輸入框內容

分析需求：讓輸入框的值 inputValue 為變成空字符串，數據的雙向綁定起作用。數據變了，頁面也就跟著變了

所以知道了原生JS操作 & Vue.js操作的區別了嗎？

原生JS：都是在操作dom
Vue.js: 操作的都是數據

總結

以上是生活随笔為你收集整理的vue实现一个带搜索功能的列表_（Vue起步）2.模板指令：v-for / v-on / v-model的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：如何访问docker内php,主机怎么访
下一篇：如何在vb.net中取得两时间的毫秒差_