用Textarea渲染对应的列表中？？

Question

问题：用左边输入框 输入内容  对应到右边不同的列表中 
用换行符 拆分单行 左边改动右边跟着改动
这能实现吗？怎么做呢**** 求大lao解答 ji ji ji****

Answer 1

textarea不是加input 事件slit拆成数组后，右边v-for遍历下？大概写了个示例

<style>
    textarea{outline:none}
    .item{border:solid 1px #ccc;margin-bottom:3px}
    .item .text{display:inline-block;width:100px;height:30px;padding:5px}
    .item select{height:50px;border:none;border-left:solid 1px #ccc;width:30px;}
</style>
<div id="app">
    <table>
        <tr>
            <td valign="top">
                发送内容<br />
                <textarea style="width:200px;height:300px" @input="split"></textarea>
            </td>
            <td>--></td>
            <td valign="top">
                <div v-for="(item,index) in list" class="item">
                    <div class="text">{{item}}</div>
                    <select v-bind:disabled="index==0"></select>
                </div>
            </td>
        </tr>
    </table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: { list: [] },
        methods: {
            split(e) {
                console.log(e.target.value)
                this.list = e.target.value.split('\n')
            }
        }
    })
</script>

有帮助麻烦点下【采纳该答案】，谢谢~~有其他问题可以继续交流~