Vue中怎樣為循環(huán)渲染的內(nèi)容中的部分添加事件?

<body>
    <div id='app'>
        <table id="table"></table>
        <button @click="btn">按鈕</button>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        methods:{
            btn(){
                let str = `<tr><td id="qwe">qwe</td></tr>`;
                document.getElementById('table').innerHTML = str;
            }
        }
    })
</script>

剛?cè)隫ue的坑，請(qǐng)教各位大佬如何給id='qwe'的標(biāo)簽添加事件呢？
還是…這樣寫(xiě)的思想本來(lái)就是錯(cuò)的……
謝謝各位指教

再次謝謝各位指教，優(yōu)化了一下變成了這樣：

<button @click="btnQuest">Query</button>

methods:{

btnQuest(){
    for(var i = 0;i < data.length;i++){
        this.tableData.push([{title:data[i].copy}])
    }
}

}

var data = [{copy:'美元',},

        {copy:'蘋(píng)果',},
        {copy:'米飯',},
        {copy:'菜花',},
        {copy:'手機(jī)',}]

不知道這種for循環(huán)的渲染方式對(duì)不對(duì)，主要目的還是給渲染完的<td>綁定事件，比如data中渲染到<td>標(biāo)簽里的文字如果是"食物"種類就隨便alert點(diǎn)什么，否則不綁定事件要怎么實(shí)現(xiàn)呢？

真的真的再次謝謝大家。

回答

編輯回答

雅痞

你的倒數(shù)第二句話對(duì)了。你這個(gè)思想就錯(cuò)了。 vue是基于dom的最好不要手動(dòng)操作dom

2018年2月17日 11:40

編輯回答

青瓷

建議不要直接操作dom，盡量都由數(shù)據(jù)控制

<body>
    <div id='app'>
        <table id="table">
            <tr v-if="isShow"><td id="qwe" @click="clickFn">qwe</td></tr>
        </table>
        <button @click="btn">按鈕</button>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            isShow:false
        },
        methods:{
            btn(){
                this.isShow = !this.isSHow
            }
        }
    })
</script>

2018年5月4日 00:10

編輯回答

情未了

既然你是通過(guò)dom添加，那就用dom綁定就是了

document.getElementById('table').innerHTML = str;
document.getElementById('qwe').onclick = function(){
    console.log(1)
}

在vue，react中，講的就是虛擬dom，就是盡量避免操作dom，所以這樣寫(xiě)的思想是錯(cuò)的，你應(yīng)該去利用數(shù)據(jù)來(lái)渲染

template:
<table id="table">
    <tr v-for="(item,i) in tableData" :key='i'>
        <td v-for="(item2,j) in item" :key='j' @click='handleClick'>{{item2.title}}</td>
    </tr>
</table>

data:
tableData:[]

methods:
btn(){
    this.tableData = [[{title:'qwe'}]]
}

2017年7月16日 00:10