欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > vue >内容正文

vue

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

发布时间：2024/7/23 vue 52 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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 双向的数据绑定效果吧（如图）

1

2

四、实现在点击“提交”后将input里的value值输出展示在页面中

  • 实现需求： “提交” 和 输入进去的内容 结合
<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) //实现输入+提交的结合}}})</script> </body>

试一下：输入框 空白时，点击 “提交”， 弹出空白内容框。输入内容时，输入框（页面）数据变化，实例 data 中 inputValue 也跟着变化（数据的双向绑定），点击 “提交” ，弹出有内容框。

五、实现每当在输入框中输入东西，页面列表中也会增加相应的东西

  • 分析需求：先分析列表增加的方式就是在 data 中的 list 操作，每添加一个数据，就会在页面出现一个列表；然后实现输入框输入值，使用 data 中的 inputValue 来代表每次输入框输入的值；点击之后出结果
<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) //实现列表+输入+点击 }}})</script> </body>

六、实现每次输入完都清空输入框内容

  • 分析需求：让输入框的值 inputValue 为变成空字符串，数据的双向绑定起作用。数据变了，页面也就跟着变了
<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), //实现列表+输入+点击this.inputValue = '' //实现输入后框内变空}}})</script> </body>

所以知道了原生JS操作 & Vue.js操作的区别了吗？

  • 原生JS：都是在操作dom
  • Vue.js: 操作的都是数据

总结

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

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。