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>