本節(jié)知識點
- Vue 中的is 問題
(1) Vue中的is屬性
vue中is的屬性引入是為了解決dom結(jié)構(gòu)中對放入html的元素有限制的問題，譬如ul里面要接上li的標簽，引入is的屬性后，你完全可以寫成這樣
<body>
<div id="app">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
</body>
<script>
let row = {
data() {
return {
content: "這個就是222行"
}
},
template: '<li>{{content}}</li>'
};
let app = new Vue({
el: "#app",
data: {
message: "Hello World!"
},
components: {
row
}
})
</script>
(2) Vue中的DOM操作
Vue中的DOM操作必須借助ref
this.$refs 獲取到所有的ref引用,然后找到引用的元素
例如
<body>
<div id="app">
<div @click="dianji" ref='hello'>Hello world</div>
</div>
</body>
<script>
let app = new Vue({
el: "#app",
data() {
return {
msaage: "測試點擊我開始"
}
},
methods: {
dianji() {
console.log(this.$refs.hello);
this.$refs.hello.style["color"] = "red";
}
},
})
</script>
