-被挂载的组件

var addType = { template: '
'+ '
添加新闻分类
'+ '
'+ ''+ ''+ ''+ ''+ ''+ ''+ '
分类名称
父分类名称
'+ ''+ '顶级'+ '{{ option.tname }}'+ ''+ '
'+ ''+ '
'+ '
', 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样式了