工作笔记--vue相关（一）_vue change.native.stop-优快云博客

本文链接：https://blog.youkuaiyun.com/jiaojsun/article/details/78871485

本文介绍了如何使用Vue结合ElementUI实现复选框功能，并探讨了样式导入、资源路径配置及事件监听技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用vue和elementui做一个复选框

代码如下

<li v-for="item in totalBars['subitem']" v-if="!item.url" class="normal-show-text">
   <el-checkbox class="checked-text" v-model="item.isBeChecked" @change.native.stop="changeChecked(item.number,totalBars['file_name'])"></el-checkbox>
 <div class="checked-text-info">
     <b>{{item.number}}</b>
     <strong>【{{item.title}}】</strong><br/>
     <em :title="item.remarks">{{item.remarks}}</em>
 </div>                                      
</li>

需要注意的两点，复选框是否选中用v-model，点击复选框使用@change

2.@import的路径问题

如下所示，在exportDwg.vue中引用

<style>
@import "../../styles/exportDwg.styl";
</style>

exportDwg.vue和exportDwg.styl的位置关系如下所示
这里写图片描述

3.src路径问题

“url”:”vm/src/components/exportDwg/imgexportdwg/standard-layer/test.jpg”
这里写图片描述

4.vue什么时候使用.native(见文档)

有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native。例如：

<my-component v-on:click.native="doTheThing"></my-component>

所谓原生就类似于你直接用

$element.addEventListener(click, callback);

绑定事件。
my-component会阻止click事件，你可以试试只用click不用native,事件是不会触发的。而普通的html元素如a标签不会阻止。