Vue.js实现列表清单的操作方法

2024-12-03 02:57:05

一、Vue.js简要说明

Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与前端框架Angular一样， Vue.js在设计上采用MVVM模式，当View视图层发生变化时，会自动更新到ViewModel.反之亦然，View与ViewModel之间通过数据双向绑定(data-binding)建立联系，如下图所示

Vue.js通过MVVM模式将视图与数据分成两部分(或者说视图代码与业务逻辑的解耦)，因此我们只需关心数据的操作，DOM的视图的更新等一系列事情，Vue会帮我们自动搞定。

如通过v-model指令实现数据的双向绑定，用户在输入框中输入任意的值，实时显示用户输入message的值（对应上述MVVM模式关系图不难理解）

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js数据的双向绑定</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 Bootstrap -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div class="container" id="app">
    <input v-model="message" placeholder="请任意输入" class="form-control">
    <p>Message is: {{ message }}</p>
  </div>
  <script type="text/javascript">
    new Vue({ //创建Vue实例
      el:"#app", //挂载创建Vue实例对象
      data: {
        message : "Hello Vue.js"
      },
      methods:{}
    })
  </script>
</body>
</html>

以下楼主直接绕过Vue.js基础语法，对基础语法不了解的可以查阅相关资料，从通过Vue.js优雅实现任务列表操作案例说起，将Vue.js碎片化的知识点模块整合在一块。

接下来一块体验一下Vue.js(读音 /vjuː/，类似于 view) 的小清新的/简洁的写法吧.

二、Vue.js优雅的实现任务列表的操作

Vue.js 优雅实现任务列表效果图预览请点击

三、HTML骨架CSS样式代码

使用BootStrap前端响应式开发框架，HTML骨架及CSS样式Demo如下

 <!DOCTYPE html>
 <html>
 <head>
   <title>Vue.js</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- 引入 Bootstrap -->
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   <!-- 引入 vue.js -->
   <script src="https://unpkg.com/vue"></script>
   <style type="text/css">
     .list-group button {
       background: none;
       border: 0;
       color: red;
       outline: 0;
       float: right;
       font-weight: bold;
       margin-left: 5px;
     }
   </style>
 </head>
 <body>
   <div class="container" id="app">
     <p v-show="remainTask.length>0">任务列表</p>
     <ul class="list-group">
        <li class="list-group-item">
          <span title="编辑任务">Vue.js - 是一套构建用户界面的渐进式框架</span>
          <button title="移除任务">✗</button>
          <button title="任务完成">✔</button>
        </li>
     </ul>
     <form>
       <div class="form-group">
        <label for="exampleInputEmail1">任务描述</label>
        <input type="text" class="form-control" placeholder="请输入你要添加的任务" required>
       </div>
       <div class="form-group">
         <button class="btn btn-primary" type="submit">添加任务</button>
       </div>
     </form>
     <p>已完成的Task</p>
     <ol class="list-group">
       <li class="list-group-item">
        JavaScript高级程序设计
       </li>
     </ol>
   </div>
 </body>
 </html>

四、实例化Vue及应用Vue指令Directives添加项目中

<div class="container" id="app" v-cloak>
     <p v-show="remainTask.length>0">任务列表 ({{remainTask.length}})</p>
     <ul class="list-group">
      <template v-for="task in remainTask">
        <li class="list-group-item">
          <span v-on:dblclick="editTask(task)" title="编辑任务">{{task.text}}</span>
          <button v-on:click="removeTask(task)" title="移除任务">✗</button>
          <button v-on:click="completeTask(task)" title="任务完成">✔</button>
        </li>
      </template>
     </ul>
     <form>
       <div class="form-group">
        <label for="exampleInputEmail1">任务描述</label>
        <input type="text" class="form-control" placeholder="请输入你要添加的任务" v-model="newTask" required>
       </div>
       <div class="form-group">
         <button class="btn btn-primary" type="submit" v-on:click="addTask">添加任务</button>
       </div>
     </form>
     <p>已完成的Task({{filterTask.length}})</p>
     <ol class="list-group">
       <template v-for="task in filterTask">
         <li class="list-group-item">
           {{task.text}}
         </li>
       </template>
     </ol>
   </div>
   <script type="text/javascript">
     var app = new Vue({  //创建Vue对象实例
       el:"#app", //挂载DOM元素的ID
       data: {
         tasks : [
           { text : "Vue.js - 是一套构建用户界面的渐进式框架", complete:false},
           { text : "Bootstrap 响应式布局", complete:false },
           { text : "Webpack前端资源模块化管理和打包工具", complete:false},
           { text : "Yarn 中文手册Yarn 是一个快速、可靠、安全的依赖管理工具", complete:true},
           { text : "JavaScript语言精粹", complete:false},
           { text : "JavaScript高级程序设计", complete:true}
         ],
         newTask:"程序员的修炼之道" //默认值
       },
       methods:{
         addTask:function(event){ //添加任务
           event.preventDefault();
           this.tasks.push({
             text: this.newTask,
             complete: false
           });
           this.newTask = "";
         },
         editTask:function(task){ //编辑任务
           //移除当前点击task
           this.removeTask(task);

           //更新vue实例中newTask值
           this.newTask = task.text;
         },
         removeTask: function(task){ //删除任务
           //指向Vue实例中的tasks
           _tasks = this.tasks;
           //remove
           _tasks.forEach(function(item, index){
             if(item.text == task.text){
               _tasks.splice(index, 1);
             }
           })
         },
         completeTask: function(task){ //任务完成状态
           task.complete = true; //设置任务完成的状态
         }
       },
       //用于计算属性，属性的计算是基于它的依赖缓存(如vue实例中的tasks)
       //只有当tasks数据变化时,才会重新取值
       computed:{
         remainTask:function(){ //筛选未完成的记录
           return this.tasks.filter(function(task){ //filter过滤器
             return !task.complete;
           })
         },
         filterTask:function(){ //筛选已完成的记录
           return this.tasks.filter(function(task){
             return task.complete;
           })
         }
       }
     });
   </script>

v-cloak 主要解决页面初始化慢，乱码的问题(如显示页面显示Vue取值表达式)；

v-show 指令简单的CSS属性的切换，适合频繁的切换 CSS属性从display的切换)

v-if 指令决定页面是否插入，相对v-show切换开销比较大

v-on:dblclick, v-on:click 页面事件的绑定

(如 v-on:dblclick(task) 方法名dblclick() 参数task 是的当前点击的tasks数组中的某一个对象

v-for 迭代指令循环遍历数组 filter 主要用于筛选符合条件的数据/日期格式化等

computed用于计算属性，属性的计算是基于它的依赖缓存(如vue实例中的tasks) 只有当tasks数据变化时,才会重新取值　

PS:下面看下使用Vue.js实现列表选中效果

html

<div id="app">
 <div class="collection">
  <a href="#!" class="collection-item"
    v-for="gameName in gameNames"
    :class="{active: activeName == gameName}"
    @click="selected(gameName)">{{gameName}}</a>
 </div>
</div>

new Vue({
 el: "#app",
 data: {
  gameNames: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄',
   '守望先锋'
  ],
  activeName: ''
 },
 methods: {
  selected: function(gameName) {
   this.activeName = gameName
  }
 }
})

总结

以上所述是小编给大家介绍的Vue.js实现列表清单的操作，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

Vue.js Ajax动态参数与列表显示实现方法
vue.js学习笔记之绑定style样式和class列表
Vue.JS入门教程之列表渲染
Vue.js学习教程之列表渲染详解
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
Vue.js列表渲染绑定jQuery插件的正确姿势
Vue.js实现网格列表布局转换方法

Vue.js列表渲染绑定jQuery插件的正确姿势

使用v-for绑定列表时,有时候需要绑定如select2之类的jQuery插件. 需要在Vue根据数组内容生成dom元素之后,去找到该dom元素,然后 $().xxx绑定jQuery插件. 之前使用Vue.nextTick方法,在一次dom更新以后执行延迟回调,渲染jQuery插件. 然而这并不是一种很好的方式,有时候难以确定dom元素更新是否是我们需要关注的那个. 在列表中渲染Jquery插件的正确姿势,是使用自定义指令.自定义指令提供了一些钩子函数,可以准确的监听到dom元素与数据的绑定周期
Vue.js Ajax动态参数与列表显示实现方法

Vue.js简介 vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.动态参数显示 ajax异步请求后,接收到返回的data参数并显示在前端 1.1 引入js,也加入了jQuery <script type="text/javascript" src="/js/vue.min.js"></script> <script type="text/javascript&
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)

在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 HTML 自身的 select 下拉列表.然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击的操作,如何关闭已经打开的下拉列表? 解决思路如下:在 DOM 的根节点上添加一个 click 事件,同时下拉列表内阻止事件的默认行为和冒泡.当响应这个点击事件的时候,说明是在下拉列表范围外的点击(因为下拉列表内阻止了事件的冒泡),就可以关闭已经打开的下拉列表. 如果是纯 JS 代码,有人可能会使用
vue.js学习笔记之绑定style样式和class列表

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q
Vue.JS入门教程之列表渲染

你可以使用 v-repeat 指令来基于 ViewModel 上的对象数组渲染列表.对于数组中的每个对象,该指令将创建一个以该对象作为其 $data 对象的子 Vue 实例.这些子实例继承父实例的数据作用域,因此在重复的模板元素中你既可以访问子实例的属性,也可以访问父实例的属性.此外,你还可以通过 $index 属性来获取当前实例对应的数组索引. <ul id="demo"> <li v-repeat="items" class="ite
Vue.js学习教程之列表渲染详解

本文主要给大家介绍了关于Vue.js列表渲染的相关资料,分享出来给大家参考学习,下面来看看详细的介绍: v-for 可以使用 v-for 指令基于一个数组渲染一个列表.这个指令使用特殊的语法,形式为item in items,items 是数据数组,item 是当前数组元素的别名: 示例: <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li>
Vue.js实现网格列表布局转换方法

实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&quo
Vue.js实现列表清单的操作方法

一.Vue.js简要说明 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时,会自动更新到ViewModel.反之亦然,View与ViewModel之间通过数据双向绑定(data-binding)建立联系,如下图所示 Vue.js通过MVVM模式将视图与数据分成两部分(或者说视图代码与业务逻辑的解耦),因此我们只需关心数据的操作,DOM的视图的更新等一系列事情,V
vue.js删除列表中的一行

splice(index,num,item1,item2,...,itemX) 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注:index--规定添加/删除项目的位置 num--要删除的项目数量 item--向数组添加的新项目 splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素. 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组. (1)html代码: <div id="ap
vue.js给动态绑定的radio列表做批量编辑的方法

每个题目绑定的题目结构如下json对象,每次动态添加选项就是将其加入了vue实例的某个数组对象中: vm.options.push({ id: "", text: "新选项", checked: false }); 现在对radio或者checkbox集合列表进行批量添加,这里使用到了textarea容器. textare每一行都是一条数据,它的内部是根据回车来区分(break-word自动换行不算),每一行是一个对象,整体就是一个文本数组了,获取如下: var c
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例

本文实例讲述了vue.js基于v-for实现批量渲染 Json数组对象列表数据.分享给大家供大家参考,具体如下: Vuejs的出现减轻了对DOM的直接操作,同时它提供的 v-for 渲染列表数据也给我们提供了很大的方便.即使是复杂的 Json数组对象,也可以使用多层嵌套的 v-for 实现,格式如下: <div v-for="(item,index) in items"> <div v-for="(list,index) in item.lists&quo
你不可不知的Vue.js列表渲染详解

介绍用 v-for 把一个数组对应为页面上的一组元素 vue.js 使用的是 v-for 指令来处理组件元素的循环迭代逻辑.通常它会和 v-if 配合使用,达到我们所需要的处理逻辑. v-for 的语法形式是 item in items,其中 items 就是我们要循环的数组,而 item 则是被迭代的数组元素的别名. <ul id="example-1"> <li v-for="item in items"> {{ item.messag
深入浅析Vue.js 中的 v-for 列表渲染指令

1 基本用法当遍历一个数组或枚举一个对象进行迭代循环展示时,就会用到列表渲染指令 v-for. 它的表达式需要结合 in 来使用,类似 item in items 的形式. 1.1 遍历数组 html: <div id="app"> <ul> <li v-for="n in news">{{n.title}}</li> </ul> </div> js: <script> var a

Vue.js实现列表清单的操作方法

您可能感兴趣的文章:

相关推荐

随机推荐