1.首先在页面引入vue.js(不熟悉vue项目的,可以在自己的项目引入使用)
2
3.其次就是页面的渲染了怎么让ajax请求到数据给到页面呢,写个关于聊天的小demo吧!
/chat.id是来判断发消息的是自己还是别人
如果是1就是自己一般居右否则用v-else居左
其中布局使用flex布局/
html部分//
/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(‘服务器异常’);
});