Vue中$set,动态刷新页面并加载数据

最新推荐文章于 2024-03-20 11:43:28 发布

qq_41428035

最新推荐文章于 2024-03-20 11:43:28 发布

阅读量1.4k

点赞数

分类专栏： Vue 文章标签： Vue $set 动态数组动态刷新

本文链接：https://blog.csdn.net/qq_41428035/article/details/102687303

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

$set,动态刷新页面并加载数据

适用

一对多，动态添加数据并显示

题设

两个输入框，分别显示姓名和年龄，一个添加按钮，每点击一次就再生成一条同样的输入框用于编辑

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  
</head>
<body>
<div id="app">
  <div v-for="(item,index) in shujulist">
    {{index+1}}
    <input v-model="item.xingming">
    <input v-model="item.nianling">
  </div>
  <button @click="add">增加一条数据</button>
  <div>
</body>
  <script>
    new Vue({
      el:"#app",
      data:{
        shujulist:[
          {
            xingming:'小明',
            nianling:'16'
          }
        ]
      },
      methods:{
        add:function(){
          var a={
            xingming:'小明',
            nianling:'16'
          };
          this.$set(this.shujulist,this.shujulist.length,a);
        }
      }
    })
  </script>
</html>

在这里插入图片描述
以上事例测试代码及输出来自Js Bin

qq_41428035

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue中$set,动态刷新页面并加载数据

$set,动态刷新页面并加载数据适用一对多，动态添加数据并显示题设两个输入框，分别显示姓名和年龄，一个添加按钮，每点击一次就再生成一条同样的输入框用于编辑代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="...
复制链接

扫一扫