vue页面和html混合,html和vue混合开发

1.首先在页面引入vue.js(不熟悉vue项目的，可以在自己的项目引入使用)

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(‘服务器异常’);

});

vue页面和html混合,html和vue混合开发相关推荐

vue页面回显数据_解决vue表单回显数据无法修改的问题
前言:今天在做修改操作的时候遇到了一个问题,数据回显到修改表单之后,发现无法输入,也不能实现修改项目环境:springboot+vue前后端分离问题:修改操作数据回显无法输入值一.问题截图二. ...
Vue页面骨架屏（一）
在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loading图效果,而一些大公司会配置一套服务端渲染的架构来解决这个问题.考虑到ssr所要解决的一系列问题 ...
基于若依框架（前后端分离）-新写前端Vue页面
1.启动前后端项目,在前端页面的菜单管理添加一个新的菜单或者目录 2.在views底下写Vue页面 3.在routers/index.vue里配置路由最后,效果图:
vue页面路由的原理
47. vue页面路由的原理 1. 原理 Vue 中的路由原理是基于浏览器的 history API 和 Vue 的路由插件 Vue Router 实现的. 具体来说,当浏览器接收到一个新的路由请求时 ...
vue页面实现语音播报
vue页面实现语音播报 1.vue页面添加鼠标滑动事件 2.data中定义是否已经开启了语音播报 3.监听用户鼠标移入事件 4.voicePlay()方法,使用的是百度的tts 5. watch监听后 ...
vue 加载页面时触发时间_解析Vue项目的四个方面优化
在本篇文章里我们给大家整理了一篇关于优化VUE项目的四个总要点,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 运行时优化 1.使用v-if代替v ...
php加载外部html,VUE页面加载外部HTML实例详解
前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的.所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件.需要搞点事情以达到想要的效果.本文主要和大家介绍了V ...
vue 页面闪烁的问题_vue页面加载闪烁问题的解决方法
v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v- ...
vue 页面使用百度地图
前言 vue 3.x 百度地图JavaScript API GL v1.0 百度地图的源码编辑器:http://lbs.baidu.com/jsdemo.htm#webgl0_0 本文代码在百度地图的 ...
vue页面跳转后返回原页面初始位置
vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的 ...

vue页面和html混合,html和vue混合开发

vue页面和html混合,html和vue混合开发相关推荐

最新文章

热门文章