html运行老是页面加载错误,jquery load加载页面引起的vue模板语法失效问题

全局变量baseUrl

var baseUrl='http://192.168.1.230:807/';

打开页面，默认访问index.html

加载

function mroalLoad(obj,url){

$(obj).load(url);

}

var baseUrl='http://192.168.1.230:8088/vuetest/';

var test3=new Vue({

el:'#app',

data:{

},

methods:{

add:function(){

mroalLoad('#moral-contain','test-guide.html');

}

}

});

test-guide.html

• 加载test-list.html
• {{item.name}}--点击后弹窗容器内加载test-detail.html

v-model="flag"

title="打分">

var test1=new Vue({

el:'#mTest',

data:{

flag:false,

testArr:[

{name:'test-guide-1',id:1},

{name:'test-guide-2',id:2},

{name:'test-guide-3',id:3},

{name:'test-guide-4',id:4},

{name:'test-guide-5',id:5},

{name:'test-guide-6',id:6}

]

},

methods:{

testList:function(){//index.html页面的容器load test-list页面

$('#moral-contain').load('test-list.html');

},

testDetail:function(){//弹窗容器加载test-detail页面

this.flag=true;

$('.ivu-modal-body #rongqi').load(baseUrl+'test-detail.html');

}

}

});

test-list.html

返回

• {{item.name}}

var test2=new Vue({

el:'#mTestList',

data:{

testArr:[

{name:'test-list-1',id:1},

{name:'test-list-2',id:2},

{name:'test-list-3',id:3},

{name:'test-list-4',id:4},

{name:'test-list-5',id:5},

{name:'test-list-6',id:6}

]

}

});

点击返回按钮index.html容器加载test-guide.html,问题就出现在这里，返回之后点击含有testDetail方法的li选项容器内查看详细页模板语法就失效了，直接显示大括号{{item.name}}

test-detail.html

• {{item.name}}

var test3=new Vue({

el:'#mdetail',

data:{

flag:false,

testArr:[

{name:'test-detail-1',id:1},

{name:'test-detail-2',id:2},

{name:'test-detail-3',id:3},

{name:'test-detail-4',id:4},

{name:'test-detail-5',id:5},

{name:'test-detail-6',id:6}

]

}

});