首页 > web前端 > js教程 > vue中v-model动态使用详解

vue中v-model动态使用详解

php中世界最好的语言
发布: 2018-04-16 13:38:55
原创
3570 人浏览过

这次给大家带来vue中v-model动态使用详解,vue中v-model动态使用的注意事项有哪些,下面就是实战案例,一起来看一下。

前言:

最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的。那么问题来了,我们要怎样动态生成v-model?

现在项目做完了就整理了一下,直接贴代码了。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src="js/vue.js" ></script>

  </head>

  <body>

    <p id="app">

      <p class="line" v-for="(item,index) in dataModel">

        <input type="text" v-model="dataModel[index].value1" />

        <span>{{dataModel[index].value1}}</span>

        <button v-bind:data-index="index" v-on:click="submitClick">提交</button>

        <input type="text" v-model="dataModel[index].value2" />

        <span>{{dataModel[index].value2}}</span>

      </p>

    </p>

  </body>

  <script>

    var app = new Vue({

      el: "#app",

      data: {

        // 创建一个空的数组 

        dataModel: []

      },

      created: function(){

        // 这里是动态生成v-model,这个可以放在网络请求成功里面;

        var len = 4;

        for (var i = 0; i < len; i ++) {

          var item = {value1: '',value2: ''};

          this.dataModel.push(item);

        }

      },

      methods: {

        // 显示v-model里面的数据

        submitClick: function(event){

          var tag = event.target;

          var index = tag.getAttribute('data-index');

          alert(this.dataModel[index].value1);

        }

      }

    })

  </script>

</html>

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

SpringJDBC怎样批量操作数据

使Cluster共享内存有哪些方法

以上是vue中v-model动态使用详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板