Vue实现添加数据到二维数组并显示

 更新时间:2022年04月24日 14:05:00   作者:南柯Seven  
这篇文章主要介绍了Vue实现添加数据到二维数组并显示方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

添加数据到二维数组并显示

<li v-for="(item, index) in studentlist" :key="index">
    {{item.stu_name}}--{{item.stu_score}}
</li>
<td>
    <tr>
       <span id="student_name">学生姓名</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>

实现:

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>

读取二维数组

var board = gameContent[0].board;

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3+ts数组去重方及reactive/ref响应式显示流程分析

    vue3+ts数组去重方及reactive/ref响应式显示流程分析

    这篇文章主要介绍了vue3+ts数组去重方法-reactive/ref响应式显示,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • 详解如何优雅的进行Vue的状态管理

    详解如何优雅的进行Vue的状态管理

    随着项目的发展和复杂性的增加,对 Vuex 进行更深入的了解和使用就变得非常重要,本篇文章将带您探索 Vuex 的进阶使用,包括模块化、命名空间、getter 的高级用法等,需要的朋友可以参考下
    2023-09-09
  • vue 设置proxyTable参数进行代理跨域

    vue 设置proxyTable参数进行代理跨域

    这篇文章主要介绍了vue 设置proxyTable参数进行代理跨域的相关资料,及代理跨域的概念原理,需要的朋友可以参考下
    2018-04-04
  • vite.config.js或者vue.config.js配置方式

    vite.config.js或者vue.config.js配置方式

    这篇文章主要介绍了vite.config.js或者vue.config.js配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue.js实现表格动态增加删除的方法(附源码下载)

    Vue.js实现表格动态增加删除的方法(附源码下载)

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,下面这篇文章主要给介绍了Vue.js实现表格动态增加删除的方法实例,文末提供了源码下载,需要的朋友可以参考借鉴。
    2017-01-01
  • Vue实现搜索 和新闻列表功能简单范例

    Vue实现搜索 和新闻列表功能简单范例

    本文通过实例代码给大家介绍了Vue实现搜索 和新闻列表功能简单范例,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2018-03-03
  • Vue2.0学习系列之项目上线的方法步骤(图文)

    Vue2.0学习系列之项目上线的方法步骤(图文)

    这篇文章主要介绍了Vue2.0学习系列之项目上线的方法步骤(图文),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue组件文档生成备注详解

    vue组件文档生成备注详解

    这篇文章主要介绍了vue组件文档生成备注详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vite配置路径别名的简单实现方法

    Vite配置路径别名的简单实现方法

    Vite项目中我们可以手动将src路径设置**@**路径别名,可以省下很多引入路径的冗余路径,下面这篇文章主要给大家介绍了关于Vite配置路径别名的简单实现方法,需要的朋友可以参考下
    2023-04-04
  • vue实现全匹配搜索列表内容

    vue实现全匹配搜索列表内容

    这篇文章主要为大家详细介绍了vue实现全匹配搜索列表内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09

最新评论