鍍金池/ 問答/HTML/ Vue中怎樣為循環(huán)渲染的內容中的部分添加事件?

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

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

剛入Vue的坑，請教各位大佬如何給id='qwe'的標簽添加事件呢？
還是…這樣寫的思想本來就是錯的……
謝謝各位指教

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

{{item2.title}}

<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:'蘋果',},
        {copy:'米飯',},
        {copy:'菜花',},
        {copy:'手機',}]

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

真的真的再次謝謝大家。

回答
編輯回答
雅痞

你的倒數(shù)第二句話對了。你這個思想就錯了。 vue是基于dom的最好不要手動操作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
編輯回答
情未了

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

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

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

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