當(dāng)前位置：首頁 >

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

發(fā)布時間：2024/7/23 34 豆豆

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

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

關(guān)鍵詞：v-for、 v-on 、v-model
實現(xiàn)需求：循環(huán)數(shù)據(jù)、綁定事件、數(shù)據(jù)的雙向綁定
了解：Vue.js 設(shè)計思想、Vue.js 的基礎(chǔ)語法
注意：v-on:click 用 @click代替

一、實現(xiàn)通過 input 框向“正在進行”的列表中增加列表項內(nèi)容

使用：v-for 幫助去循環(huán)多行數(shù)據(jù)

//創(chuàng)建一個Vue實例，加上對應(yīng)的 el 和 data 數(shù)據(jù) //在dom元素加上vue的一個指令 v-for 用于循環(huán)多列數(shù)據(jù)<!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: ['第一課內(nèi)容' , '第二課內(nèi)容' , '33333']}})</script></body> </html>

list：需要循環(huán)數(shù)據(jù)
item: 指的是循環(huán)過程中循環(huán)的每一項內(nèi)容

假設(shè)，在list再任意假如一個字符串，如'33333' ，那么此時瀏覽器頁面上也會相應(yīng)出現(xiàn)列表內(nèi)容為 33333 的效果

二、實現(xiàn)在輸入框輸入內(nèi)容提交后，提交功能出現(xiàn) 彈出框效果

分析需求：點擊“提交”按鈕，需要用綁定事件實現(xiàn)
使用：v-on Vue 用于綁定事件的模板指令（如點擊事件，v-on:click="handleBtnClick"，這里的 handleBtnClick 是一個函數(shù)（一種方法），對應(yīng)地在 Vue 實例中也要相應(yīng)地映射這種方法）
注意：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: ['第一課內(nèi)容' , '第二課內(nèi)容' , '33333']},methods: {handleBtnClick : function(){alert('click')}}})</script> </body>

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

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

三、實現(xiàn)輸入內(nèi)容，在頁面上展示輸入的內(nèi)容

使用：v-model 用于實現(xiàn)數(shù)據(jù)的雙向綁定。它的值等于一個數(shù)據(jù)。

<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 綁定數(shù)據(jù)。當(dāng) dom 元素中的內(nèi)容發(fā)生變化時，Vue 實例中 data 數(shù)據(jù)中對應(yīng) v-model 的數(shù)據(jù)值也會相應(yīng)地發(fā)生變化；反之，data 的對應(yīng)數(shù)據(jù)值發(fā)生變化，頁面也會發(fā)生變化

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

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

實現(xiàn)需求： “提交” 和輸入進去的內(nèi)容結(jié)合

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

五、實現(xiàn)每當(dāng)在輸入框中輸入東西，頁面列表中也會增加相應(yīng)的東西

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

六、實現(xiàn)每次輸入完都清空輸入框內(nèi)容

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

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

原生JS：都是在操作dom
Vue.js: 操作的都是數(shù)據(jù)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

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

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

一、實現(xiàn)通過 input 框向“正在進行”的列表中增加列表項內(nèi)容

二、實現(xiàn)在輸入框輸入內(nèi)容提交后，提交功能 出現(xiàn) 彈出框效果

三、實現(xiàn)輸入內(nèi)容，在頁面上展示輸入的內(nèi)容