-被挂载的组件
var addType = {
template: '<p id="app-main" class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">'+
'<h2 class="sub-header">添加新闻分类</h2>'+
'<p class="table-responsive">'+
'<table class="table">'+
'<tr><td>分类名称</td><td><input type="text" name="tname" id="tname"></td></tr>'+
'<tr>'+
'<td>父分类名称</td>'+
'<td>'+
'<select class="form-control" style="width:150px">'+
'<option value="0">顶级</option>'+
'<option v-for="option in options">{{ option.tname }}</option>'+
'</select>'+
'</td>'+
'</tr>'+
'</table>'+
'<input type="button" class="btn btn-primary" value="提交" id="addTypeBtn">'+
'</p>'+
'</p>',
mounted: function(){
var that = this;
$.get("mook/addTypeC.php","",function(response){
that.options = JSON.parse(response);
});
},
data: function(){
return {
options: [{'tname':'国际新闻'},{'tname':'体育新闻'}]
};
},
}
-挂载组件:
var appMain = new Vue({
el: "#app",
data: {
currentView: 'defaultView'
},
components: {
'defaultView': defaultView,
'typeList': typeList,
'addType': addType
}
});
-点击挂载的代码
var appMenu = {
template: {/* */},
methods: {
//处理分类列表的函数
typeList: function(){
appMain.currentView = typeList;
},
//处理添加分类的函数
addType: function(){
appMain.currentView = addType;
}
}
}
显示效果如图: 点击左侧按键触发typeList函数,table样式没有渲染出来
但是为什么在chrome控制台编辑html文档,在该p前面加了一个空格就可以渲染出来table样式了
欢迎选择我的课程,让我们一起见证您的进步~~