后盾网lavarel视频项目---vue实现动态添加和删除板块
一、总结
一句话总结：
原理就是：列表时根据vue中的videos变量中的元素来遍历的，初始时videos:[{title:'',path:''}]，增加操作：this.videos.push({title:'',path:''});，删除操作：this.videos.splice(k,1);
本质是：通过【控制变量中元素的个数来控制页面中元素的个数】，增加删除操作都是【通过操作变量中元素的个数】
1、向vue中的videos变量增加元素：videos:[{title:'',path:''}]？
this.videos.push({title:'',path:''});
methods:{ add:function () { this.videos.push({title:'',path:''}); }, del:function (k) { this.videos.splice(k,1); } }
2、从vue中的videos变量中删除元素：videos:[{title:'',path:''}]？
this.videos.splice(k,1);
methods:{ add:function () { this.videos.push({title:'',path:''}); }, del:function (k) { this.videos.splice(k,1); } }
3、lavarel和vue都是{{}}表示变量，如何解决冲突？
@{{videos}}：@符号表示lavarel不处理：textarea name="" id="" cols="30" rows="10">@{{videos}}</textarea
二、vue实现动态添加和删除板块
1、示例
2、代码
1 @extends('admin.layout.master') 2 @section('title','新增课程') 3 @section('content') 4 <!-- Content Header (Page header) --> 5 <section class="content-header"> 6 <h1> 7 Dashboard 8 <small>Control panel</small> 9 </h1> 10 <ol class="breadcrumb"> 11 <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> 12 <li class="active">Dashboard</li> 13 </ol> 14 </section> 15 16 <!-- Main content --> 17 <section class="content"> 18 <div style="padding-bottom:15px;"> 19 <div class="btn-group" role="group" aria-label="..."> 20 <a href="/admin/lesson" type="button" class="btn btn-default">课程列表</a> 21 <a href="/admin/lesson/create" type="button" class="btn btn-warning">新增课程</a> 22 </div> 23 </div> 24 25 <div class="box box-info"> 26 <div class="box-header with-border"> 27 <h3 class="box-title">Horizontal Form</h3> 28 </div> 29 <!-- /.box-header --> 30 <!-- form start --> 31 <form class="form-horizontal" action="/admin/lesson" method="post"> 32 {{csrf_field()}} 33 <div class="box-body"> 34 <div class="form-group"> 35 <label for="title" class="col-sm-2 control-label">课程标题</label> 36 37 <div class="col-sm-10"> 38 <input type="text" name="title" class="form-control" id="title" required placeholder="标题"> 39 </div> 40 </div> 41 <div class="form-group"> 42 <label for="introduce" class="col-sm-2 control-label">介绍</label> 43 <div class="col-sm-10"> 44 <textarea name="introduce" class="form-control" id="introduce" rows="5"></textarea> 45 </div> 46 </div> 47 <div class="form-group"> 48 <label for="preview" class="col-sm-2 control-label">预览图</label> 49 <div class="col-sm-10"> 50 <input type="text" name="preview" class="form-control" id="preview" required placeholder="预览图" value="abc.png"> 51 </div> 52 </div> 53 <div class="form-group"> 54 <label for="is_commend" class="col-sm-2 control-label">推荐</label> 55 <div class="col-sm-10"> 56 <label class="radio-inline"> 57 <input type="radio" name="is_commend" id="is_commend1" value="1"> 是 58 </label> 59 <label class="radio-inline"> 60 <input type="radio" name="is_commend" id="is_commend0" value="0" checked> 否 61 </label> 62 </div> 63 </div> 64 <div class="form-group"> 65 <label for="is_hot" class="col-sm-2 control-label">热门</label> 66 <div class="col-sm-10"> 67 <label class="radio-inline"> 68 <input type="radio" name="is_hot" id="is_hot1" value="1"> 是 69 </label> 70 <label class="radio-inline"> 71 <input type="radio" name="is_hot" id="is_hot0" value="0" checked> 否 72 </label> 73 </div> 74 </div> 75 <div class="form-group"> 76 <label for="click" class="col-sm-2 control-label">点击数</label> 77 78 <div class="col-sm-10"> 79 <input type="number" name="click" class="form-control" id="click" placeholder="点击数" value="0"> 80 </div> 81 </div> 82 83 {{--视频管理--}} 84 <div class="panel panel-info" id="app"> 85 <div class="panel-heading">视频管理</div> 86 <div class="panel-body"> 87 {{--子元素--}} 88 <div class="panel panel-default" v-for="(v,k) in videos"> 89 <div class="panel-body"> 90 <div class="form-group"> 91 <label for="title" class="col-sm-2 control-label">视频标题</label> 92 93 <div class="col-sm-10"> 94 <input type="text" name="title" class="form-control" v-model="v.title"> 95 </div> 96 </div> 97 <div class="form-group"> 98 <label for="title" class="col-sm-2 control-label">视频地址</label> 99 <div class="col-sm-10"> 100 <input type="text" name="title" class="form-control" v-model="v.path"> 101 </div> 102 </div> 103 </div> 104 <div class="panel-footer"> 105 <button class="btn btn-success btn-sm" @click.prevent="del(k)">删除视频</button> 106 </div> 107 </div> 108 {{--END-子元素--}} 109 <div class="form-group"> 110 <textarea name="" id="" cols="30" rows="10">@{{videos}}</textarea> 111 </div> 112 </div> 113 <div class="panel-footer"> 114 <button class="btn btn-primary btn-sm" @click.prevent="add">添加视频</button> 115 </div> 116 117 118 </div> 119 120 </div> 121 <!-- /.box-body --> 122 123 <div class="box-footer"> 124 <button type="submit" class="btn btn-info">保存数据</button> 125 </div> 126 <!-- /.box-footer --> 127 </form> 128 </div> 129 130 <script> 131 require(['vue'],function (Vue) { 132 new Vue({ 133 el:'#app', 134 data:{ 135 videos:[{title:'',path:''}] 136 }, 137 methods:{ 138 add:function () { 139 this.videos.push({title:'',path:''}); 140 }, 141 del:function (k) { 142 this.videos.splice(k,1); 143 } 144 } 145 }); 146 }); 147 </script> 148 149 </section> 150 <!-- /.content --> 151 @endsection
原理：
第135行，第88行：vue根据videos中的元素循环展示列表框：
第88行：v-for="(v,k) in videos" 中v表示元素，k表示索引，也就是第几个
第135行：初始时，videos中只有一个元素{title:'',path:''}，所以框框也只有一个
138行-140行，第114行：增加框框的操作也就是给videos增加元素{title:'',path:''}，因为框框数是根据videos循环得来的
141行-143行，第105行：删除框框的操作就是去掉videos中的元素，del(k)中k表示的是第k个，splice(k,1)表示从k位置开始删一个
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
