2019-03-25

                    vue v-for通过index动态绑定input输入框的数据

    vue项目中经常会遇到各种难题,比如v-for循环出来的input输入框,如果有多个个的话,

要怎么获取他们相对的数据呢,又怎么确保获取的数据和input输入框一 一相同呢,不要慌,答案在后面!

先看效果图:


再看代码:

<div style="margin-left:100px;">

  <ul>

      <li v-for="(item,index) in 3">

        <input type="text" v-model="data[index]" style="border:1px solid #ccc;height:50px;margin-top:10px;">

      </li>

  </ul>

  <button @click="clickMe" style="height:30px;line-height:30px;margin-top:20px;">点我试试</button>

</div>

<script>

  export default {

    data() {

      data:[]

    },

    methods: {

      clickMe(){

        console.log(this.data)

      },

    }

  }   

</script>   

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • urllib库基本使用 urlopen 实际上,如果我们在浏览器上打开百度主页, 右键选择“查看源代码”,你会发现...
    娟永思阅读 249评论 0 0
  • 自然馈赠大地育 大雨滂沱处处溪 溪塘如镜照楼宇 穹宇之中清照立【开2018712】
    自由菲阅读 72评论 0 0
  • 离近年关,多年的同学,突然发微信说要来我家,大老远从广州佛山赶回来过年。 我发位置给她,她很快就到了楼下,...
    一天00阅读 210评论 0 0
  • 8.Thinking in The Certain Way 对于你想要的东西,脑海中必须形成清晰确定的画面。除非你...
    季玫阅读 162评论 2 0