鍍金池/ 問答/數(shù)據(jù)庫  HTML/ 點(diǎn)擊添加生成一個(gè)元素用Vue怎么實(shí)現(xiàn)功能？

點(diǎn)擊添加生成一個(gè)元素用Vue怎么實(shí)現(xiàn)功能？

我現(xiàn)在需要實(shí)現(xiàn)一個(gè)功能，點(diǎn)擊右邊的“添加”就生成一個(gè)左邊的框框，這個(gè)功能如何用Vue來實(shí)現(xiàn)，各位大神能否指點(diǎn)下，提供下思路。對Vue不是太熟悉，也許是沒有真正的懂得Vue的特點(diǎn)，所以沒什么頭緒
clipboard.png

回答
編輯回答
壞脾滊

如果關(guān)系可以自定義，那么
數(shù)據(jù)結(jié)構(gòu)：

 const 關(guān)系鍵值對 = {
關(guān)系0：[{姓名：'姓名00',電話：'電話00'}，{姓名：'姓名01',電話：'電話01'}],
關(guān)系1：[{姓名：'姓名10',電話：'電話10'}，{姓名：'姓名11',電話：'電話11'}]
}

；
邏輯：根據(jù)當(dāng)前選擇的關(guān)系（如關(guān)系0），然后將 聯(lián)系人的信息填入關(guān)系 為 本次選擇關(guān)系的 聯(lián)系人中。
思路的代碼實(shí)現(xiàn)：比如選擇關(guān)系為關(guān)系N，聯(lián)系人姓名為 姓名03，聯(lián)系人電話為 電話03；

     
     let userInfo = {姓名：'姓名03',電話：'電話03'};
     if(關(guān)系鍵值對['關(guān)系N']){
         關(guān)系鍵值對['關(guān)系N'].push(userInfo);
     }else{
         關(guān)系鍵值對['關(guān)系N'] = [];
         關(guān)系鍵值對['關(guān)系N'].push(userInfo);
     }

如果有看不懂得地方，你可以把你的model名字發(fā)給我，我直接給你寫代碼。

2017年10月16日 05:45
編輯回答
薄荷綠

左邊的框框列表可以用 ul 來做，v-for 一個(gè)對象數(shù)組

list: [
    {
        label: '關(guān)系',
        value: '',
    },
    ...
]

那就明了了，點(diǎn)擊'添加'，彈出個(gè)輸入框讓他自己填寫 label，然后給 list 數(shù)組增加一個(gè)對象就行.

2017年4月18日 11:52
編輯回答
安淺陌

整體思路：
數(shù)據(jù)改變視圖
template

<template>
    <div>
        <div v-for="(item , i) in list" :key="i">
            <span v-for="(val,key) in item" :key="key">
                <lable>{{val.label}}</lable>
                <input v-model="val.prop"></input>
            </span>
        </div>
        <div @click="add">添加</div>
    </div>
</tempalte>

JS


const baseInfo =[
    {label:'關(guān)系',prop:null},
    {label:'姓名',prop:null},
    {label:'電話',prop:null}
];
exprot default{
//...
    data(){
        return {
            list:[baseInfo]
        }
    },
    methods:{
        add(){
            this.list.push(baseInfo);
        }
    }
}
2018年6月3日 07:59