本节知识点
- Vue 中的is 问题
(1) Vue中的is属性
vue中is的属性引入是为了解决dom结构中对放入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>
网友评论