zoukankan      html  css  js  c++  java
  • v-for动态添加表单,并且获取表单中的值

    vue是数据驱动视图,所以要想改变页面的结构,就要首先改变数据。
    要想动态添加一个input表单,每当你点击的时候,添加一个数据在数组里面。
     handler(mess){
        this.list.push("jo")
     },
    
    要想获得当前这个表单里面的值,我当初想的是v-model,去绑定。发现不可以。这就尴尬了。
    整了一会,在百度上查找了一些资料。
    还是没有对应的案例。可能是我百度的方法是不正确。
    
    最后,还是决定使用原生的js
    给表单绑定一个id。在失去焦点的时候,得到这个input框中的值。
     let aa=document.getElementById("demo"+mess).value;
    
    <template>
        <div>
           
         <div v-for="(item,index) in list" :key="index" class="demo">
             <input type="text" :id="`demo${index}`">
             <button @click="handler(index)" @blur="getterValue(index)">添加</button>
         </div>
    
        </div>
    </template>
    
    <script>
        export default {
            data(){
              return{
                list:["12"]
              }
            },
            methods:{
                handler(mess){
                    this.list.push("jo")
                },
                getterValue(mess){
                    let aa=document.getElementById("demo"+mess).value;
                    console.log("得到的值是", aa)
                }
            }
        }
    </script>
    

  • 相关阅读:
    BZOJ 2038 小Z的袜子 莫队算法
    POJ 3407 球面距离
    POJ 1375 圆的切线
    BZOJ 1502 月下柠檬树 simpson积分
    UVA 11704
    POJ 1981 定长圆覆盖最多点
    HDU 3982 半平面交+圆和凸多边形面积并
    ZOJ 1104 二分
    使用Singleton来实现Flash和Flex的通信。
    校内API相关
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/12466274.html
Copyright © 2011-2022 走看看