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>