vue页⾯和html混合,html和vue混合开发1.⾸先在页⾯引⼊vue.js(不熟悉vue项⽬的，可以在⾃⼰的项⽬引⼊使⽤)
2
3.其次就是页⾯的渲染了怎么让ajax请求到数据给到页⾯呢，写个关于聊天的⼩demo吧！
/chat.id是来判断发消息的是⾃⼰还是别⼈
如果是1就是⾃⼰⼀般居右否则⽤v-else居左
其中布局使⽤flex布局/
html部分//
html的flex布局
/css部分，其中rightarrow和leftarrow是⽤css3写的⼩三⾓/
.leftarrow {
margin-top: 5px;
width: 0;
height: 0;
font-size: 0;
border: solid 8px;
border-color: #051A2D #051A2D #051A2D #2e7bb2
}
.rightarrow {
margin-top: 5px;
width: 0;
height: 0;
font-size: 0;
border: solid 8px;
border-color: #051A2D #2e7bb2 #051A2D #051A2D
}
js部分//
var vm = new Vue({
el: ‘#app’,
data: {
dataList: []
},
});
pageUtils.HZAjax(pageUtils.HZ_ANSWER, formData, function(data) { console.log(“13data:” + JSON.stringify(data))
if(null != data) {
var q_content = spellAnswer(q_content);
var lawContent = spellLaw(lawContent);
var caseContent = spellExample(caseContent);
html+=’
’+q_content+’
’+lawContent+’
’+caseContent+’’;
vm.dataList.push({
ans: html
})
}, function() {
pageUtils.showToast(‘服务器异常’);
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。