VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >

  • 第六十四篇：写一个多功能表格

好家伙,结合前面的内容,实践一下

 

好了,现在要结合前面学的知识写一个小案例

我想这是一个列表

 

产品需求:

1.有id,姓名,是否启用,时间,这四个属性的显示(v-model,{{}}插值表达式,v-if,v-else,v-for)

2.有删除功能(v-model,v-on,filter)

3.有添加功能(v-model,push,this)

 

好了,开搞

 

1.属性显示

大概的模板先搞出来

复制代码
<body>   
    <div id="app">
        <div>
            <p>进行属性添加</p>
            <form action="">
                <div>                   
                    <input type="text">
                    <button>提交</button>
                </div>
            </form>
        </div>
       <table>
           <thead>
               <th>id</th>
               <th>品牌</th>
               <th>是否禁用</th>
               <th>时间</th>
           </thead>
           <tbody>
               <tr v-for="item in list" :key="item.id" >
               <td>{{ item.id }}</td>
               <td>{{ item.name }}</td>
                <td>
                    <div>
                        <input type="checkbox" id="sustomSwitch1" v-model="item.status">
                        <label for="coutomSwitch1" v-if="item.status">已启用</label>
                        <label for="coutomSwitch1" v-else>已禁用</label>
                    </div>
                </td>
                <td>{{ item.time }}</td>
               </tr>
           </tbody>
       </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>
     
        const vm = new Vue({
            
            el:'#app',
           
            data:{
                list:[
                    { id:1,name:'宝马',status:true,time: new Date() },
                    { id:2,name:'奔驰',status:true,time: new Date() },
                    { id:3,name:'奥迪',status:true,time: new Date() },
                ],            
            },
            methods:{                              
             }           
        })
    </script>
</body>
复制代码

页面显示如下:

 是丑了点,

 

"是否禁用"这一项要拿出来说一下:

<div>
     <input type="checkbox" id="sustomSwitch1" v-model="item.status">
     <label for="coutomSwitch1" v-if="item.status">已启用</label>
     <label for="coutomSwitch1" v-else>已禁用</label>
</div>

注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

这里我们让两个<label>标签都为前面的<input>服务

<input>是"checkbox"类型的,所以可以用"item.status"控制真假

随后用v-model进行绑定,配合 "v-if" 和 "v-else" 就可以进行禁用状态和启用状态的切换,

 

2.添加删除功能

复制代码
<body>   
    <div id="app">
        <div>
            <p>进行属性添加</p>
            <form action="">
                <div>                   
                    <input type="text">
                    <button>提交</button>
                </div>
            </form>
        </div>
       <table>
           <thead>
               <th>id</th>
               <th>品牌</th>
               <th>是否禁用</th>
               <th>时间</th>
           </thead>
           <tbody>
               <tr v-for="item in list" :key="item.id" >
               <td>{{ item.id }}</td>
               <td>{{ item.name }}</td>
                <td>
                    <div>
                        <input type="checkbox" id="sustomSwitch1" v-model="item.status">
                        <label for="coutomSwitch1" v-if="item.status">已启用</label>
                        <label for="coutomSwitch1" v-else>已禁用</label>
                    </div>
                </td>
                <td>{{ item.time }}</td>
                <td>
                    <a href="javascript:;" @click="remove(item.id)">删除</a>//href="javascript:;"表示什么都不执行
                </td>
               </tr>
               
           </tbody>
       </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>
     
        const vm = new Vue({
            
            el:'#app',
           
            data:{
                list:[
                    { id:1,name:'宝马',status:true,time: new Date() },
                    { id:2,name:'奔驰',status:true,time: new Date() },
                    { id:3,name:'奥迪',status:true,time: new Date() },
                ],            
            },
            methods:{    
                remove(id){
                    this.list=this.list.filter(item=>item.id!==id)
                    //当前id不等于要删的id,把item项过滤出来,放回到数组里面去,
                    //数组变空,变相实现了删除的功能
                }                          
             }           
        })
    </script>
</body>
复制代码

为删除绑定一个remove方法,随后使用过滤器将其"删除"

 

没毛病:

 

搞定!

 

3.实现添加功能

好家伙,这个还挺难的

 

"添加"功能的核心业务:

往list的尾部添加数据!

 

步骤:

1.把要添加的品牌对象整理出来

2.把这个对象往list数组中push

 

好了,最终版本出来了

复制代码
<body>   
    <div id="app">
        <div>
            <p>进行属性添加</p>
            <form @submit.prevent="add">
                <div>                   
                    <input type="text" placeholder="请输入品牌" v-model.trim="brand"> //.trim用于去除前后空格
                    <button type="submit">提交</button>
                </div>
            </form>
        </div>
       <table>
           <thead>
               <th>id</th>
               <th>品牌</th>
               <th>是否禁用</th>
               <th>时间</th>
           </thead>
           <tbody>
               <tr v-for="item in list" :key="item.id" >
               <td>{{ item.id }}</td>
               <td>{{ item.name }}</td>
                <td>
                    <div>
                        <input type="checkbox" id="sustomSwitch1" v-model="item.status">
                        <label for="coutomSwitch1" v-if="item.status">已启用</label>
                        <label for="coutomSwitch1" v-else>已禁用</label>
                    </div>
                </td>
                <td>{{ item.time }}</td>
                <td>
                    <a href="javascript:;" @click="remove(item.id)">删除</a>
                </td>
               </tr>
               
           </tbody>
       </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>
     
        const vm = new Vue({
            
            el:'#app',
           
            data:{
                brand:'',
                //输入品牌名称
                nextId:4,
                //此为下一个可用的id

                list:[
                    { id:1,name:'宝马',status:true,time: new Date() },
                    { id:2,name:'奔驰',status:true,time: new Date() },
                    { id:3,name:'奥迪',status:true,time: new Date() },
                ],            
            },
            methods:{    
                remove(id){
                    this.list=this.list.filter(item=>item.id!==id)
                    //当前id不等于要删的id,把item项过滤出来,放到新数组里面去,
                    //数组变空,变相实现了删除的功能
                },        
                add(){
                    console.log('成功')//测试

                    if(this.brand==='') return alert('必须填写品牌名称!')
                    //1.把要添加的品牌对象整理出来
                    const obj ={
                        id:this.nextId,
                        name:this.brand,
                        status:true,
                        time:new Date()
                    }
                    //2.往this.list数组中push步骤1中得到的对象
                    this.list.push(obj)
                    //3.清空this.brand;让this.nextId自增+1
                    this.brand =''
                    this.nextId++
                }                  
             }           
        })
    </script>
</body>
复制代码

 

搞定

我们把前三项都删掉,再随意添加两项

来看看效果:

 

 

 搞定,

小细节,关于<form @submit.prevent="add">

<from>标签中使用.prevent修饰符取消刷新

 

 

不用element ui,实现这个感觉还挺有意思的,(难看是难看了点)

That's all

出处：https://www.cnblogs.com/FatTiger4399/p/16120159.html

相关教程