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

一、Vue.js简介

Vue.js(发音为/vju/，类似于view)是一个用于构建用户界面的渐进式框架。和前端框架Angular一样，Vue.js在设计上采用了MVVM模式。当视图层改变时，它将自动更新为视图模型。反之亦然，视图和视图模型之间的连接是通过数据绑定建立的，如下图所示

Vue.js通过MVVM模式(或者解耦视图代码和业务逻辑)将视图和数据分为两部分，所以我们只需要关心数据操作、DOM视图更新等一系列事情，Vue会帮我们自动去做。

如果通过v-model指令实现数据的双向绑定，用户在输入框中输入任意值，实时显示用户输入的消息的值(MVVM模式图不难理解)

！DOCTYPE htmlhtmlhead titleVue.js数据/title meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '！-介绍bootstrap-link href=' https://maxcdn.bootstrapcn.com/bootstrap/3.3.7/CSS/bootstrap . min . CSS ' rel='样式表' script src=' http :3359 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({/create Vue instance El 333330从通过Vue.js优雅地实现任务列表操作的案例出发，将vue.js碎片化的知识点模块集成在一起。

让我们体验一下Vue.js(发音/vju/，类似于view)的小清新/简洁的写法。

其次，Vue.js优雅地实现了任务列表的操作

Vue.js优雅实现任务列表渲染预览，请点击

三、HTML骨架CSS样式代码

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

！DOCTYPE html html head titleVue.js/title meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '！-介绍bootstrapcn-link href=' https://max cdn . bootstrapcn.com/bootstrapcn/3 . 3 . 7/CSS/bootstrap . min . CSS ' rel='样式表'！-介绍vue . js-script src=' http:3359unpkg.com/vue'/scriptstyletype=' text/CSS '。list-group button { background : none；border : 0；颜色：红色；outline : 0；向右浮动：font-weight:粗体；左边距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=' edit task ' vue . js-是一个用于构建用户界面的渐进式框架/span Button title=' remove task '/Button title=' task complete '/Button/Li/ul form div class=' form-group ' Label for=' example input ail 1 '任务描述/Label输入类型=' text ' div div class=' form-group ' button class=' btnbtn-primary ' type=' submit ' add Task/button/div/form pCompleted Task/P ol class=' list-group ' Li class=' list-group-item ' JavaScript高级编程/li /ol /div /body /html IV。 实例化Vue并应用Vue指令指令添加到项目中

div class=' container ' id=' app ' v-斗篷p v-show='remainTask.length0 '任务列表({ { remainTask。length } })/p ul class=' list-group '模板v-for=' remainTask中的任务' Li class=' list-group-item ' span v-: bl click=' editTask(task)' title='编辑任务{{task.text}}/span按钮v-:点击='删除任务(task)' '标题='移除任务/button button v-: click='完成任务(任务)' '标题='任务完成/button/Li/template/ul form div class=' form-group '标签为='范例输入项目1 '任务描述/标签输入类型=' text '类=' form-control '占位符='请输入你要添加的任务v-model='newTask '必选/div class=' form-group '按钮class=' BTN BTN-primary ' type=' submit ' v-: click=' addTask '添加任务/按钮/div/表单p已完成的任务({ {筛选器任务。length } })/p ol class=' list-group '模板v-for='任务在筛选器任务' Li class=' list-group-item ' { task。文本} }/Li/模板/ol/div脚本类型=' text/JAVAScript ' var app=new Vue({//创建某视频剪辑软件对象实例el:'#app '，//挂载数字正射影像图元素的ID数据： {任务：[{文本： ' Vue。js-是一套构建用户界面的渐进式框架，complete:false}，{ text : 'Bootstrap响应式布局，complete:false }，{ text : 'Webpack前端资源模块化管理和打包工具，complete:false}，{ text : '纱线中文手册故事是一个快速、可靠、安全的依赖管理工具，complete:true，{ text : 'JavaScript语言精粹，complete:false}，{ text : 'JavaScript高级程序设计，complete:true} ]，newTask: '程序员的修炼之道' //默认值}，方法： { addtask :函数(事件){ //添加任务事件。prevent default()；这个。任务。推({ text : this。新任务，完成：假})；this.newTask=}，editTask:function(task){ //编辑任务//移除当前点击task this.removeTask(任务);//更新某视频剪辑软件实例中新任务值这个。新任务=任务。文本；}，removeTask:函数（任务){ //删除任务//指向某视频剪辑软件实例中的任务=this.tasks//remove任务函数（项，索引){ if(item。text==任务。文本){ _任务。拼接(索引，1);} }) }，completeTask:函数（任务){ //任务完成状态task.complete=true//设置任务完成的状态} }, //用于计算属性，属性的计算是基于它的依赖缓存（如某视频剪辑软件实例中的任务)//只有当任务数据变化时，才会重新取值计算出的： { remaintask :函数(){//筛选未完成的记录返回this.tasks.filter(函数（任务){//过滤器过滤器回来！任务。完成；}) }，filterTask:function(){ //筛选已完成的记录归还这个。任务。过滤器(功能(任务){返回任务。完成；}) } } });/script v-斗篷主要解决页面初始化慢，乱码的问题（如显示页面显示某视频剪辑软件取值表达式);

电视节目指令简单的半铸钢钢性铸铁(铸造半钢)属性的切换，适合频繁的切换半铸钢钢性铸铁(铸造半钢)属性从显示的切换)

垂直中频指令决定页面是否插入，相对电视节目切换开销比较大

v-:单击，v-:单击页面事件的绑定

（如on:dblclick(任务)方法名dblclick()参数工作是的当前点击的任务数组中的某一个对象

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

Computed用于计算属性，属性的计算基于其依赖项缓存(如vue实例中的任务)。只有当任务数据发生变化时，才会检索这些值。

PS:我们来看看使用Vue.js的列表选择效果

超文本标记语言

div id=' app ' div class=' collection ' a href=' #！'class=' collection-item ' v-for=' gameName in gameNames ' : class=' { active : active name==gameName } ' @ click=' selected(gameName)' { { gameName } }/a/div/div js

Newvue ({el:' # app '，data: {游戏名称3360 ['魔兽世界'，'暗黑破坏神3 '，'星际争霸2 '，'炉石'，'风暴英雄'，'守望先锋']，活动名称3360 ')，Methods : {精选：函数(gamename) {this。活动名称=游戏名称}}})

以上是边肖介绍的Vue.js实现列表的操作。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！