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;

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue如何实时往数组里追加数据

    vue如何实时往数组里追加数据

    目录 实时往数组里追加数据 数组追加合并与对象追加合并 实时往数组里追加数据 使用Vue.set() 以下来解读一下 Vue.set(this.tableDatas, this.selected, obj) 1.this.tableDatas是我们声明好的数组,以下是自定义数据 tableDatas: [{     id: 1,     caseName: '方案一',     longMinute: 10,     longSecond: 0,     remindMinute: 2,   

  • 使用Vue3进行数据绑定及显示列表数据

    使用Vue3进行数据绑定及显示列表数据

    目录 一.与 Vue2 对比 1. Vue3 新特性 2. Vue2.Vue3 响应原理对比 3.重写数组的方法,检测数组变更 4.直观感受 二.使用Vue3进行数据绑定示例 1.使用ref实现数据绑定 2.使用reactive实现数据绑定 三.写在最后 一.与 Vue2 对比 1. Vue3 新特性 数据响应重新实现( ES6 的 proxy 代替 Es5 的 Object.defineProperty ) 源码使用 ts 重写,更好的类型推导 虚拟 DOM 新算法(更快,更小) 提供了 co

  • 使用vue中的v-for遍历二维数组的方法

    如下所示: <table cellpadding="0" cellspacing="0" class="clearfix bigTable" id='downloaddata'> <tr v-for='(item, index) in data'> <template v-for='items in item'> <template v-for='(itemss, indexs) in items' v-

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

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

    目录 添加数据到二维数组并显示 读取二维数组 添加数据到二维数组并显示 <li v-for="(item, index) in studentlist" :key="index"> {{item.stu_name}}--{{item.stu_score}} </li> <td> <tr> <span id="student_name">学生姓名</span> <inpu

  • vue简单的二维数组循环嵌套方式

    vue简单的二维数组循环嵌套方式

    目录 二维数组循环嵌套方式 vue循环数组.循环嵌套数组v-for 利用Vue循环输出标签 前端页面输出循环嵌套数组 二维数组循环嵌套方式 <div class="box">   <div class="color">      <div>蓝色/尺码</div>   </div>   //这是简单的布局 .box{     border: 1px solid red;     display: flex;

  • php实现给二维数组中所有一维数组添加值的方法

    本文实例讲述了php实现给二维数组中所有一维数组添加值的方法.分享给大家供大家参考,具体如下: 给二维数组中所有的一维数组添加值(索引和关联) $shop = array( 0=>array(0=>1,1=>2,2=>3,3=>4) ,1=>array(0=>1,1=>2,2=>3) ,2=>array(0=>1,1=>2,2=>3) ); print_r($shop); //示例 1:引用循环变量的地址赋值 foreach($

  • 用函数读出数据表内容放入二维数组

    //用函数读出数据表内容放入二维数组 //动态sql语句 //以读出点击次数表为例. function list_hit($fields,$where,$order,$direction,$limit,$conn) { if ($fields=="") {$fields="hit_id,banner_id,hit_ip,hit_time";} if ($order=="") {$direction="";} $sql=&quo

  • Numpy将二维数组添加到空数组的实现

    使用append函数将一个二维数组添加到一个空数组,关键是维度要对的上 a=np.empty([0,3]) b = np.array([[1,2,3],[4,5,6]]) c=[[7,8,9]] print(a.shape) print(b.shape) a = np.append(a, b, axis=0) a = np.append(a, c, axis=0) print(a.shape) print(b.shape) 以上这篇Numpy将二维数组添加到空数组的实现就是小编分享给大家的全部内

  • vue 如何将二维数组转化为一维数组

    vue 如何将二维数组转化为一维数组

    目录 将二维数组转化为一维数组 需求 具体实现 将多维数组转一维数组6种方法 ES6 flat方法 递归 reduce +concat + 递归 join+split toString+split eval 将二维数组转化为一维数组 需求 数组嵌套数据,导致循环不方便,想着将二维数组合并成一维数据,方便数据的操作 具体实现 利用reduce方法 reduce:不改变原数组,返回一个新的数组.就是遍历数组元素,从头开始,依次往下,第一个参数是上一次的返回值,第二个参数是下一个数组元素,首次的时候第

  • javascript二维数组转置实例

    本文实例讲述了javascript二维数组转置的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script language="javascript" type="text/javascript"> var arr1 = [[30,-1,90],[70,100,-40],[39,29,6],[39,92,9]]; var arr2 = []; //确定新数组有多少行 for(var i=0;i<arr1[0].length

  • javascript 二维数组的实现与应用

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>二维函数</

  • numpy向空的二维数组中添加元素的方法

    直接上代码了 x = np.empty(shape=[0, 4], int) x = np.append(x, [[1,2,3,4]], axis = 0) x = np.append(x, [[1,2,3,4]], axis = 0) 这样就添加了两行4列的数据了.注意append里面是两层括号,这个非常重要,如果漏掉了就不是二维数组了,用axis的时候就会报维度不匹配. 以上这篇numpy向空的二维数组中添加元素的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我

随机推荐