vue
Jamie Chyi
清风
展开
-
面向Java开发者的Echarts饼图百分比计算方法
在开发中有这样的问题,就是需要在其他地方展示百分比,但是自己计算的百分比通过四舍五入后,与饼图里面的百分比不一致的问题,要想解决这个问题,那么必须要使用echarts源码中的计算方式。当存在四舍五入的时候,Echarts的百分比算法和自己写的百分比算法不同,导致相加后不等于100%.开发中从后端计算好即可解决问题。原创 2023-03-10 11:23:16 · 1196 阅读 · 1 评论 -
一招教你实现自适应浏览器大小的Echarts饼状图
在上面的代码中,我们在组件的"mounted"钩子函数中绑定了"resize"事件,并在事件处理函数"handleResize"中调用了Echarts实例的"resize"方法来重新绘制图表。同时,我们也在组件的"beforeDestroy"钩子函数中解绑了"resize"事件,以避免内存泄漏。具体来说,您可以在Vue组件的"mounted"钩子函数中绑定"resize"事件,并在事件处理函数中调用Echarts实例的"resize"方法来重新绘制图表。原创 2023-03-07 12:18:06 · 2251 阅读 · 2 评论 -
原来这么简单!Vue实现动态表头详细步骤
至于接下来,勾选状态下的具体操作,我就不一一列举了。关键代码:放入你项目中合适的位置。原创 2023-02-16 16:51:46 · 1241 阅读 · 3 评论 -
Vue禁止选择以后的日期或者默认显示某个日期
【代码】Vue禁止选择以后的日期或者默认显示某个日期。原创 2023-02-10 17:31:31 · 357 阅读 · 0 评论 -
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
element-ui table组件el-table-column的td是利用了display: table-cell 控制显示。采用v-if的方式进行解决,但这样会伴随一个问题,可能会导致表格样式错乱,可以给每一列加入一个key即可。而display:table-cell的优先级又高于display:none,所以v-show失效。当我们在想对表格的某一列进行隐藏的时候,采用了v-show进行隐藏,但是发现似乎隐藏不了。v-show起作用的本质是利用display:none控制隐藏。原创 2023-01-30 10:17:34 · 3073 阅读 · 0 评论 -
Vue数据操作:如何在对象拷贝中正确选择深拷贝或浅拷贝?
场景复现:我们在对一个表单进行编辑时候,编辑完内容,并没有保存的时候,点击关闭,这个时候我们的表单的该字段也随着我们的编辑而改变了,但是这个值并没有被真正被保存到数据库。我们在编辑表单的时候,直接将row对象复制给了弹窗需要的对象,这个时候这俩个对象任意一个的属性内容发生改变的话,另一个也会伴随着变化。这是因为两个对象引用了同一个对象。这就是所谓的浅拷贝:只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。深拷贝:创造一个一模一样的对象,修改对象不会影响到原对象。原创 2023-01-08 21:51:03 · 870 阅读 · 1 评论 -
Vue数据渲染技巧:从三种方式看后端数据的灵活处理
【代码】Vue根据后端返回结果转换成不同的展示效果的三种方式。原创 2023-01-08 21:31:33 · 1435 阅读 · 0 评论 -
万事起头难:完整步骤带你学会Node.js环境配置
3、打开命令行(以管理员身份打开),输入node -v,出现以下版本号,代表node成功安装。4、在node.js安装路径下新建node_global、node_cache两个文件夹。修改用户变量中的npm路径,修改为node_global路径。5、以管理员身份打开命令窗口,执行以下命令设置资源存放位置。,这里可以选择你想要的版本,我这里以14.15.1为例。7、可以安装cnpm(淘宝镜像,下载速度比较快)8、最后修改NODE_PATH的地址即可。2、下载完成后,直接傻瓜式安装即可。原创 2022-12-31 20:49:14 · 1409 阅读 · 0 评论 -
部署Vue项目到Nginx:简明教程
1、什么是nginxnginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的,公开版本1.19.6发布于2020年12月15日。 [12]其将源代码以类BSD许可证的形式发布,因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。2022年01月25日,nginx 1.21.6发布。 [13]Nginx是一款轻量级的原创 2022-05-22 13:27:29 · 1860 阅读 · 1 评论 -
Vue中v-model的使用
1、v-model的基本使用:<div id="app"> <input type="text" v-model="message"> {{message}}</div><script src="../js/vue.js"></script><script> const app = new Vue({ el: '#app', data: { message: 'hello' }原创 2021-08-23 19:41:54 · 330 阅读 · 1 评论 -
Vue-购物车简单案例
效果图:代码部分:index.html<div id="app"> <div v-if="books.length"> <table> <thead> <tr> <th></th> <th>书籍名称</th> <th>出版日期</th> <th>价格</原创 2021-08-22 13:15:49 · 409 阅读 · 18 评论 -
Vue-条件判断与循环遍历
条件判断v-if的使用<div id="app"> <h1 v-if="scope>20">{{message}}</h1></div><script src="../js/vue.js"></script><script> const app = new Vue({ el: '#app', data: { message: 'hello', scope: 90原创 2021-08-22 13:05:04 · 778 阅读 · 2 评论 -
Vue-计算属性与事件监听
计算属性1、基本使用<div id="app"> <h2>{{getName()}}</h2> <!--计算属性--> <h2>{{fullName}}</h2></div><script src="../js/vue.js"></script><script> const app = new Vue({ el: '#app', data: {原创 2021-08-22 12:46:15 · 292 阅读 · 2 评论 -
Vue-动态绑定属性
1、v-bind基本使用<div id="app"> <img v-bind:src="url" alt="美女"> <!--语法糖的写法--> <a :href="aHalf">百度一下</a></div><script src="../js/vue.js"></script><script> const app = new Vue({ el: '#app',原创 2021-08-21 13:02:14 · 491 阅读 · 0 评论 -
Vue-插值的操作
1、Mustache语法基本使用 <h1>{{message}}</h1> <!--不仅可以写变量,也可以写简单的表达式--> <h1>{{firstName + ' ' + lastName}}</h1> <h1>{{firstName}} {{lastName}}</h1> <h1>{{weight * 2}}</h1></div><script src原创 2021-08-20 20:43:17 · 463 阅读 · 0 评论