Vue實(shí)現(xiàn)添加數(shù)據(jù)到二維數(shù)組并顯示

更新時間：2022年04月24日 14:05:00 作者：南柯Seven

這篇文章主要介紹了Vue實(shí)現(xiàn)添加數(shù)據(jù)到二維數(shù)組并顯示方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

添加數(shù)據(jù)到二維數(shù)組并顯示

<li v-for="(item, index) in studentlist" :key="index">
    {{item.stu_name}}--{{item.stu_score}}
</li>
<td>
    <tr>
       <span id="student_name">學(xué)生姓名</span>
       <input type="text" v-model="student_name">
     </tr>
</td>
<td>
     <tr>
        <span id="student_score">期末成績</span>
        <input type="text" v-model="student_score">
     </tr>
</td>

實(shí)現(xiàn)：

export default {
  name: 'Index',
  data () {
    return {
      student_name: '',
      student_score: '',
      studentlist: []
    }
  },
  methods: {
    addstudent () {
      this.studentlist.push({
        stu_name: this.student_name,
        stu_score: this.student_score
      })
      console.log(this.studentlist)
    }
  }
}
</script>

讀取二維數(shù)組

var board = gameContent[0].board;

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3+ts數(shù)組去重方及reactive/ref響應(yīng)式顯示流程分析
這篇文章主要介紹了vue3+ts數(shù)組去重方法-reactive/ref響應(yīng)式顯示,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
詳解如何優(yōu)雅的進(jìn)行Vue的狀態(tài)管理
隨著項(xiàng)目的發(fā)展和復(fù)雜性的增加,對 Vuex 進(jìn)行更深入的了解和使用就變得非常重要,本篇文章將帶您探索 Vuex 的進(jìn)階使用,包括模塊化、命名空間、getter 的高級用法等,需要的朋友可以參考下
2023-09-09
vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域
這篇文章主要介紹了vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域的相關(guān)資料，及代理跨域的概念原理,需要的朋友可以參考下
2018-04-04
vite.config.js或者vue.config.js配置方式
這篇文章主要介紹了vite.config.js或者vue.config.js配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue.js實(shí)現(xiàn)表格動態(tài)增加刪除的方法（附源碼下載）
Vue.js通過簡潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復(fù)雜的生態(tài)中，Vue.js有幸受到一定程度的關(guān)注，下面這篇文章主要給介紹了Vue.js實(shí)現(xiàn)表格動態(tài)增加刪除的方法實(shí)例，文末提供了源碼下載，需要的朋友可以參考借鑒。
2017-01-01
Vue實(shí)現(xiàn)搜索和新聞列表功能簡單范例
本文通過實(shí)例代碼給大家介紹了Vue實(shí)現(xiàn)搜索和新聞列表功能簡單范例，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧
2018-03-03
Vue2.0學(xué)習(xí)系列之項(xiàng)目上線的方法步驟(圖文)
這篇文章主要介紹了Vue2.0學(xué)習(xí)系列之項(xiàng)目上線的方法步驟(圖文)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
vue組件文檔生成備注詳解
這篇文章主要介紹了vue組件文檔生成備注詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vite配置路徑別名的簡單實(shí)現(xiàn)方法
Vite項(xiàng)目中我們可以手動將src路徑設(shè)置**@**路徑別名,可以省下很多引入路徑的冗余路徑,下面這篇文章主要給大家介紹了關(guān)于Vite配置路徑別名的簡單實(shí)現(xiàn)方法,需要的朋友可以參考下
2023-04-04
vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09