VUE

1.使用双花括号的数据绑定方式，页面加载时会先显示花括号{{}} ，再加载数据，影响UI体验

解决：使用 [v-cloak] 样式

复制代码
<body>
        <style>
            [v-cloak]{
                display: none;
            }
        </style>
        <div id="app" v-cloak>
            {{ messgae }} {{ name }}
        </div>
        <script type="text/javascript">
        var app=new Vue(
            {
                el:"#app",
                data:{
                    messgae:"hello Vue!",
                    name:"Vue"
                }
            }
        );
        </script>
    </body>
复制代码

或者使用 v-text 绑定

<div id="app" v-text="messgae"> </div>

 2.使用element组件 绑定事件 v-on:dblclick 没有生效，因为在自定义组件上注册的事件触发的是组件自定义的事件，根本不是原生的dom事件

解决：使用 v-on:dblclick.native 绑定 ，.native修饰符就是用来注册元素的原生事件而不是组件自定义事件的， 等同于在子组件中：子组件内部处理dblclick事件然后向外发送dblclick事件：$emit("dblclick".fn)

<el-input size="small" v-if="item.MaterialWeighID==0" v-model="item.InTruckNumber" v-on:dblclick.native="applyLastPlate"></el-input>

 3.错误处理原则：先保证JS 顺序代码中没有逻辑错误，再处理功能错误，否则会出现奇怪的JS错误

 4.使用element组件，显示问题，必须使用完整的结束标签，不能使用 / 否则后面的标签不显示

复制代码
@*正确写法*@
<div>
    <el-divider direction="vertical"></el-divider>
    <span>3</span>
</div>
@*错误写法*@
<div>
    <el-divider direction="vertical" />
    <span>3</span>
</div>
复制代码

 5.动态样式 Css & Style 

三元运算符

<span :class="item.shipNum > item.sumNum ? 'dColor-blue' : 'dColor-red'">{{item.tongSJSum}}</span>

并行条件

<div :class="{ 'bColor-green':item.isKaiPan == '已开盘','transp-block':item.isArchived }"></div>

 Style 

<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"  :style="{width:item.percentage}">

 6.Element 中的 table expand异步加载，需要点2次才渲染数据的问题

外层表格添加这属性 row-key="id"  事件 :expand-row-keys="expandKeys"  

 

posted @   竹殇  阅读(40)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae