1.is的使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue的is解决h5中的小bug</title>
</head>
<body>
<script src="https://vuejs.org/js/vue.js"></script>
<div id="app">
<table>
<item></item>
<item></item>
<item></item>
<item></item>
</table>
</div>
<script>
// 创建全局组件:表格的行 组件中的data必须是函数
Vue.component('item',{
template:'<tr><td> {{content}}</td></tr>',
data:function(){
return {
content:"是个傻妞"
}
}
})
var vm=new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
上面这段代码是我们常用组件的写法,在页面张也能展示此内容,但在控制台的展示结构中我们看到如下结构
tr没有在table下,不是想要的结果,这个时候要使用is属性来使用组件,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue的is解决h5中的小bug</title>
</head>
<body>
<script src="https://vuejs.org/js/vue.js"></script>
<div id="app">
<table>
<tr is="item"></tr>
<tr is="item"></tr>
<tr is="item"></tr>
<tr is="item"></tr>
</table>
</div>
<script>
// 创建全局组件:表格的行 组件中的data必须是函数
Vue.component('item',{
template:'<tr><td> {{content}}</td></tr>',
data:function(){
return {
content:"是个傻妞"
}
}
})
var vm=new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
再看控制台输出
得到了正常的table结构。
当使用table,ul,ol,select这样固定结构的h5标签,当用tr,li,li,option作为子组件时,不能直接使用,要使用is属性来绑定。
注:在组件中data必须是函数。