快捷導(dǎo)航

vue動(dòng)態(tài)刪除從數(shù)據(jù)庫(kù)倒入列表的某一條方法

更新時(shí)間：2018年09月29日 09:32:40 作者：俊人呀

今天小編就為大家分享一篇vue動(dòng)態(tài)刪除從數(shù)據(jù)庫(kù)倒入列表的某一條方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  //導(dǎo)入vue.js
  <script type="text/javascript" src="./vue.js"></script>
  //非常簡(jiǎn)單了設(shè)置了一下css樣式
  <style type="text/css">
  #app{
    height: 100%;
    margin-left: 200px;
    width:50%;
    text-align: center;
    background-color: lightpink
    }
    .tab{
      width: 600px;
      margin-top: 30px;
      background-color: lightpink;
    }
    input{
      height: 25px;
      margin-top: 10px;
      border-radius:5px;
    }
  </style>  
</head>
<body>
  <div id="app">
  <div class="createForm">
    姓名:<input type="text" name="uname" v-model="userName"><br>
    年齡:<input type="text" name="uage" id="uage" v-model="userAge"><br>
    性別:<select name="gender" v-model="selected">
      <option v-for="option in options" v-bind:value="option.gender">
        {{option.gender}}
      </option>        
    </select>
    {{selected}}
    <br>
    <button type="button" v-on:click="insertInfo">創(chuàng)建</button>
  </div> 
  <table class="tab">
    <tr style="background-color: pink">
      <th>姓名</th>
      <th>年齡</th>
      <th>性別</th>
      <th>刪除</th>
    </tr>
    <tr v-for="(person,index) in infoArr">
      <td>{{person.uname}}</td>
      <td>{{person.uage}}</td>
      <td>{{person.gender}}</td>
      <td><button v-on:click="deleteInfo(index)">刪除</button></td>
    </tr>
  </table>
  </div>
</body>
</html>
<script type="text/javascript">
 new Vue({
    el:"#app",
    data:{
      msg:"hello",
      selected:'女',
      userName:'',
      userAge:'',
      options:[
      {gender:"男"},
      {gender:"女"}
      ],
      infoArr:[]
    },
    methods:{
    //添加數(shù)據(jù)的方法
      insertInfo(){
        var obj={};
        obj.uname=this.userName;
        obj.uage=this.userAge;
        obj.gender=this.selected;
        this.infoArr.push(obj);
        console.log(obj);
      },
      //刪除的方法
      deleteInfo(index){
        this.infoArr.splice(index,1);
      }
    }    
  })
 
</script>

以上這篇vue動(dòng)態(tài)刪除從數(shù)據(jù)庫(kù)倒入列表的某一條方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的方法代碼
這篇文章主要給大家介紹了關(guān)于Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的相關(guān)資料,Pinia是Vue.js的官方狀態(tài)管理庫(kù),輕量且功能強(qiáng)大,支持模塊化和TypeScript,PiniaPluginPersistedState是一個(gè)插件,需要的朋友可以參考下
2024-11-11
vue3動(dòng)態(tài)路由刷新后空白或者404問題的解決
在vue項(xiàng)目中采用動(dòng)態(tài)添加路由的方式,第一次進(jìn)入頁(yè)面會(huì)正常顯示,但是點(diǎn)擊刷新頁(yè)面后會(huì)導(dǎo)致頁(yè)面空白,所以下面這篇文章主要給大家介紹了關(guān)于vue3動(dòng)態(tài)路由刷新后空白或者404問題的解決方法,需要的朋友可以參考下
2022-07-07
全局安裝 Vue cli3 和繼續(xù)使用 Vue-cli2.x操作
這篇文章主要介紹了全局安裝 Vue cli3 和繼續(xù)使用 Vue-cli2.x操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue如何實(shí)現(xiàn)Toast輕提示
這篇文章主要介紹了vue如何實(shí)現(xiàn)Toast輕提示，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue3中element-plus?icon圖標(biāo)的正確使用姿勢(shì)
element-plus官方提示,Icon圖標(biāo)正在向SVG?Icon遷移,之前使用的Font?Icon即將被棄用,下面這篇文章主要給大家介紹了關(guān)于vue3中element-plus?icon圖標(biāo)的正確使用姿勢(shì),需要的朋友可以參考下
2022-03-03
Vue3中當(dāng)v-if和v-for同時(shí)使用時(shí)產(chǎn)生的問題和解決辦法
封裝一個(gè)組件時(shí),我使用到了v-for和v-if,它們?cè)谕粯?biāo)簽內(nèi),總是提示v-for循環(huán)出來的item在實(shí)例中沒有被定義,查詢資料后原因是因?yàn)関-for和v-if在同級(jí)使用時(shí),v-if優(yōu)先級(jí)比v-for高,所以本文給大家介紹了Vue3中當(dāng)v-if和v-for同時(shí)使用時(shí)產(chǎn)生的問題和解決辦法
2024-07-07
VUE多個(gè)下拉框?qū)崿F(xiàn)雙向聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了VUE多個(gè)下拉框?qū)崿F(xiàn)雙向聯(lián)動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
vue3-HTTP請(qǐng)求方式
這篇文章主要介紹了vue3-HTTP請(qǐng)求方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue 解決mintui彈窗彈起來,底部頁(yè)面滾動(dòng)bug問題
這篇文章主要介紹了vue 解決mintui彈窗彈起來,底部頁(yè)面滾動(dòng)bug問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-06-06