初夏七鹿 2021-11-11 11:57 采纳率: 81.3%
浏览 62
已结题

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

img

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

  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-11-11 12:12
    关注

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

    img

    <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>
    

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 11月19日
  • 已采纳回答 11月11日
  • 创建了问题 11月11日

悬赏问题

  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果