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

最新推荐文章于 2024-06-12 07:47:47 发布

weixin_39661780

最新推荐文章于 2024-06-12 07:47:47 发布

阅读量560

点赞数 1

文章标签： vue实现一个带搜索功能的列表 vue实现多行数据提交

①公众号：王酱酱记
②记录跟着文档学习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值输出展示在页面中

实现需求： “提交” 和 输入进去的内容 结合

<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: 操作的都是数据

weixin_39661780

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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 用 ...
复制链接

扫一扫