-被挂载的组件

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样式了