vue小demo（穿梭框和全选框）

妖狐艹你老母 2022-12-22 09:16 146阅读 0赞

# vue小demo（穿梭框和全选框） #

一个正在努力爱好运动的前端  
座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。

--------------------

### 文章目录 ###

*  vue小demo（穿梭框和全选框）
 *  一、穿梭框（邀请好友）
 *  二、全选框

--------------------

# 一、穿梭框（邀请好友） #

效果：添加、删除 、鼠标移入显示删除 、移出隐藏

//关键代码
    
    				<div class="col-xs-6 col-sm-6" >
    					<div class="panel panel-success">
    						
    						<div class="panel-heading">
    							<h3 class="panel-title">所有好友({
       {items.length}})</h3>
    						</div>
    						
    						<div class="panel-body panel-height">
    							<ul>
    								<li v-for="(v,i) in items" ::key="i" @click="addItem(v)">
    									<span class="glyphicon glyphicon-fire photo"></span>{
       {v.name}}({
       {v.qq}})
    								</li>
    							</ul>
    						</div>
    					</div>
    				</div>
    				
    				<div class="col-xs-6 col-sm-6" >
    					<div class="panel panel-success">
    						
    						<div class="panel-heading">
    							<h3 class="panel-title">已选择联系人({
       {selectedItems.length}})</h3>
    						</div>
    						
    						<div class="panel-body panel-height">
    							<ul >
    								<li v-for="(v,i) in selectedItems" :key="i" @mouseover="flag=i" @mouseout="flag='hide'">
    									<span class="glyphicon glyphicon-fire photo"></span>{
       {v.name}}({
       {v.qq}})
    									<span class="glyphicon glyphicon-trash del" @click="delItem(i)" v-show="flag == i"></span>
    								</li>
    							</ul>
    						</div>
    					</div>

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 1]

# 二、全选框 #

效果：全选与多选

<!DOCTYPE html>
     <html>
     <head>
       <meta charset="utf-8"/>
       <title>用户列表checkbox选项操作（全选）</title>
       <link rel="stylesheet" type="text/css" href="css/index.css">
       <script src='js/vue.js'></script>
       <script src='js/index.js'></script>
     </head>
     <body>
       <div id='demo'>
         <table class="table"> 
               <thead>
                 <tr>
                   <th>
                     <input type="checkbox" v-model="checkAll" @change="checkAllItem()">
                   </th>
                   <th>用户姓名</th>
                   <th>用户性别</th>
                   <th>所在城市</th>
                   <th>操作</th>
                 </tr>
               </thead>
               <tbody>
                 <tr v-for="(v,i) in items" :key="i">
                     <th><input type="checkbox" v-model="v.state" @change="checkItem()"></th>
                     <td>{
       {v.name}}</td>
                     <td>{
       {v.sex}}</td>
                     <td>{
       {v.city}}</td>
                     <td><button disabled="true">删除</button></td>
                 </tr>
               </tbody>
             </table>
        </div>
       
     </body>
     </html>

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/51fffa0fdc2842e090ab6b4594cb5edd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/92431a45cdb249f5a269c75b3b686d7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/1aa83fa6e6004fcbb49847531a768d81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/e888b70653fb40b19bc0bb83b8030d86.png