后盾網(wǎng)lavarel視頻項(xiàng)目---vue實(shí)現(xiàn)動(dòng)態(tài)添加和刪除板塊

一、總結(jié)

一句話總結(jié)：

原理就是：列表時(shí)根據(jù)vue中的videos變量中的元素來(lái)遍歷的，初始時(shí)videos:[{title:'',path:''}]，增加操作：this.videos.push({title:'',path:''});，刪除操作：this.videos.splice(k,1);

本質(zhì)是：通過(guò)【控制變量中元素的個(gè)數(shù)來(lái)控制頁(yè)面中元素的個(gè)數(shù)】，增加刪除操作都是【通過(guò)操作變量中元素的個(gè)數(shù)】

?

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}}：@符號(hào)表示lavarel不處理：textarea name="" id="" cols="30" rows="10">@{{videos}}</textarea

?

?

?

二、vue實(shí)現(xiàn)動(dòng)態(tài)添加和刪除板塊

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">課程標(biāo)題</label> 36 37 <div class="col-sm-10"> 38 <input type="text" name="title" class="form-control" id="title" required placeholder="標(biāo)題"> 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">預(yù)覽圖</label> 49 <div class="col-sm-10"> 50 <input type="text" name="preview" class="form-control" id="preview" required placeholder="預(yù)覽圖" 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">點(diǎn)擊數(shù)</label> 77 78 <div class="col-sm-10"> 79 <input type="number" name="click" class="form-control" id="click" placeholder="點(diǎn)擊數(shù)" 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">視頻標(biāo)題</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">保存數(shù)據(jù)</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根據(jù)videos中的元素循環(huán)展示列表框：

第88行：v-for="(v,k) in videos" 中v表示元素，k表示索引，也就是第幾個(gè)

第135行：初始時(shí)，videos中只有一個(gè)元素{title:'',path:''}，所以框框也只有一個(gè)

138行-140行，第114行：增加框框的操作也就是給videos增加元素{title:'',path:''}，因?yàn)榭蚩驍?shù)是根據(jù)videos循環(huán)得來(lái)的

141行-143行，第105行：刪除框框的操作就是去掉videos中的元素，del(k)中k表示的是第k個(gè)，splice(k,1)表示從k位置開始刪一個(gè)

?

轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/11538350.html

總結(jié)

以上是生活随笔為你收集整理的后盾网lavarel视频项目---vue实现动态添加和删除板块的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。