后盾网lavarel视频项目---vue实现动态添加和删除板块
后盾网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位置开始删一个
版权申明:欢迎转载,但请注明出处
一些博文中有一些参考内容因时间久远找不到来源了没有注明,如果侵权请联系我删除。
在校每年国奖、专业第一,加拿大留学,先后工作于华东师范大学和香港教育大学。
2024-09-05:27岁,宅加太忙,特此在网上找女朋友,vx:fan404006308
AI交流资料群:753014672