暫無(wú)數(shù)據(jù)....

第二步、增加模態(tài)框，模態(tài)框默認(rèn)為隱藏的

  
  
  
  
  



  
    
      用戶(hù)名:
      
    
    
      年　齡:
      
    
    
      
      
    
  
  

  
    用戶(hù)信息表
    
      序號(hào)
      名字
      年齡
      操作
    
    
      1
      張三
      20
      
        刪除
      
    
    
      2
      李四
      22
      
        刪除
      
    
    
      
        刪除全部
      
    
    
      
        
暫無(wú)數(shù)據(jù)....
      
    
  

  
  
    
      
        
          
            ×
          
          確認(rèn)刪除么?
        
        
          取消
          確認(rèn)
        
      
    
  

第三步、定義userList用來(lái)保存用戶(hù)，userName保存用戶(hù)名, age保存用戶(hù)變量，  然后把userName和age 通過(guò) v-model指令綁定到對(duì)應(yīng)的輸入框，實(shí)現(xiàn)輸入框與變量中的數(shù)據(jù)雙向驅(qū)動(dòng)，在表格的行中輸出userList

  
  
  
  
  
  
  



  
    
      用戶(hù)名:
      
    
    
      年　齡:
      
    
    
      
      
    
  
  

  
    用戶(hù)信息表
    
      序號(hào)
      名字
      年齡
      操作
    
    
      {{$index+1}}
      {{value.name}}
      {{value.age}}
      
        刪除
      
    
    
      
        刪除全部
      
    
    
      
        
暫無(wú)數(shù)據(jù)....
      
    
  

  
  
    
      
        
          
            ×
          
          確認(rèn)刪除么?
        
        
          取消
          確認(rèn)
        
      
    
  

第四步、添加用戶(hù)，點(diǎn)擊添加按鈕，把輸入框中的數(shù)據(jù)作為一個(gè)對(duì)象 push 到數(shù)組userList，添加完之后，把userName, age清空，那么兩個(gè)輸入框的內(nèi)容就會(huì)被清空

用戶(hù)名:



年　齡:









用戶(hù)信息表

序號(hào)
名字
年齡
操作


{{$index+1}}
{{value.name}}
{{value.age}}

刪除




刪除全部




暫無(wú)數(shù)據(jù)....










×

確認(rèn)刪除么?


取消
確認(rèn)

第五步、結(jié)合數(shù)組的長(zhǎng)度與v-show指令，實(shí)現(xiàn)提示信息的顯示與隱藏

  
  
  
  
  
  
  



  
    
      用戶(hù)名:
      
    
    
      年　齡:
      
    
    
      
      
    
  
  

  
    用戶(hù)信息表
    
      序號(hào)
      名字
      年齡
      操作
    
    
      {{$index+1}}
      {{value.name}}
      {{value.age}}
      
        刪除
      
    
    
      
        刪除全部
      
    
    
      
        
暫無(wú)數(shù)據(jù)....
      
    
  

  
  
    
      
        
          
            ×
          
          確認(rèn)刪除么?
        
        
          取消
          確認(rèn)
        
      
    
  

第六步、實(shí)現(xiàn)刪除某行數(shù)據(jù)

  
  
  
  
  
  
  



  
    
      用戶(hù)名:
      
    
    
      年　齡:
      
    
    
      
      
    
  
  

  
    用戶(hù)信息表
    
      序號(hào)
      名字
      年齡
      操作
    
    
      {{$index+1}}
      {{value.name}}
      {{value.age}}
      
        刪除
      
    
    
      
        刪除全部
      
    
    
      
        
暫無(wú)數(shù)據(jù)....
      
    
  

  
  
    
      
        
          
            ×
          
          確認(rèn)刪除么?
        
        
          取消
          確認(rèn)
        
      
    
  

第七步、實(shí)現(xiàn)刪除全部行

  
  
  
  
  
  
  



  
    
      用戶(hù)名:
      
    
    
      年　齡:
      
    
    
      
      
    
  
  

  
    用戶(hù)信息表
    
      序號(hào)
      名字
      年齡
      操作
    
    
      {{$index+1}}
      {{value.name}}
      {{value.age}}
      
        刪除
        
      
    
    
      
        
          刪除全部
        
      
    
    
      
        
暫無(wú)數(shù)據(jù)....
      
    
  

  
  
    
      
        
          
            ×
          
          確認(rèn)刪除么?
        
        
          取消
          確認(rèn)
          
        
      
    
  

關(guān)于“vue如何實(shí)現(xiàn)留言板todolist功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。