日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(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ù)綁定效果吧（如圖）

1

2

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

  • 實現(xiàn)需求： “提交” 和 輸入進去的內(nèi)容 結(jié)合
<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(this.inputValue) //實現(xiàn)輸入+提交的結(jié)合}}})</script> </body>

試一下：輸入框 空白時，點擊 “提交”， 彈出空白內(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é)果
<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(){this.list.push(this.inputValue) //實現(xiàn)列表+輸入+點擊 }}})</script> </body>

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

  • 分析需求：讓輸入框的值 inputValue 為變成空字符串，數(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(){this.list.push(this.inputValue), //實現(xiàn)列表+輸入+點擊this.inputValue = '' //實現(xiàn)輸入后框內(nèi)變空}}})</script> </body>

所以知道了原生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)容還不錯，歡迎將生活随笔推薦給好友。