使用vscode开发vue项目,iview中<Col></Col>标签报错

最新推荐文章于 2023-05-28 23:06:58 发布
原创 最新推荐文章于 2023-05-28 23:06:58 发布 · 2.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #iview #vscode

本文解决了一个常见的VSCode编辑器中Vetur插件的eslint报错问题。通过将vetur.validation.template设置为false，可以有效避免不必要的代码检查错误，提升编程效率。

这种报错很烦人

示例：
在这里插入图片描述
解决方法：
这是vetur中eslint的问题，在vscode菜单中，文件->首选项->设置，找到 “vetur.validation.template”: true 将其改为false，就可关闭eslint的检查，错误消失。
在这里插入图片描述

之后重启下就ok了

vscode 使用iView时标签报错 Parsing error: x-invalid-end-tag
gyp0307的博客
07-23 1053
开发工具：vscode  错误案例： 解决方案： vetur中eslint的问题，在vscode菜单中，文件-&gt;首选项-&gt;设置；找到 “vetur.validation.template”: true 将其改为false，就可关闭eslint的检查，错误消失。 在这里记录一下。...
vscode中iview的</Col>标签报错问题
anmi7832的博客
03-27 1116
直接看问题截图： 这是vetur中eslint的问题，在vscode菜单中，文件->首选项->设置 找到“vetur.validation.template”: true将其改为false，就可关闭eslint的检查，错误消失 重启后恢复正常 转载于:https://www.cnblogs.com/stella1024...
vue项目中，iview的<Col>标签报错
weixin_44969578的博客
01-19 1268
在网上搜索，大多数是说把vscode的设置里面的vetur.validation.template取消勾选，不过我试过没有作用，另外还要在.eslintrc.js 中rules 中加入这一行代码 "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }] 这样同时作用就解决了 ...
VSC(Visual Studio Code开发者工具) + vue + iview 表格/分页组件的使用
CN-LILU的博客
11-01 1764
iview 引入 可参考：http://v1.iviewui.com/docs/guide/start 首先，在你的vue项目中安装iview依赖； 在你的命令窗口输入：npm install iview --save（记得要先进去你的文件所在目录） 或者先在package.json文件里的"dependencies"下写下：“iview”: “^3.0.0”, 2）安装之后，然后就在vue项目的...
COL命令
Halou, I'm a DBA!
11-30 846
COL命令： 主要格式化列的显示形式。  该命令有许多选项，具体如下： COL[UMN] [{ column|expr} [ option ...]] , Option选项可以是如下的子句:  ALI[AS] alias  CLE[AR]  FOLD_A[FTER]  FOLD_B[EFORE]  FOR[MAT] format  HEA[DING] text 
<Col span="6"> <FormItem label="可申请量"> <div>{{formData.qtyUsable}}</div> </FormItem> </Col>在后面直接跟上单位，单位是formData.unit,直接拼接就可以，直接给出代码
03-11
参考用户提供的引用内容，例如引用[4]中的th:each遍历，可能用户的项目中使用了类似Thymeleaf的模板语法，但在这里是Vue的模板语法，所以应该使用双花括号。同时，其他引用如[1]中的代码示例也使用了类似的数据绑定...
error: Parsing error: invalid-first-character-of-tag-name (vue/no-parsing-error) at src\views\student\StudentHome.vue:11:24: 9 | <div class="info1" v-for="index in 4" :key="index" :id="'info' + index"> 10 | <h2>{{ info[index] }}</h2> > 11 | <h2>{{ (index < 2) ? percent[index] + `%` : percent[index] }}</h2> | ^ 12 | </div> 13 | </div> 14 | </div>
最新发布
04-02
例如使用`<Col>`组件时，若写成单标签形式`<Col/>`可能触发`x-invalid-end-tag`错误[^3]。 **解决方案**： ```html <!-- 错误写法 --> <Col span="12"/> <!-- 正确写法 --> <Col span="12"></Col> ``` #### 2. ...
<div class="layui-container"> <div class="hot-sell" v-if="bookAll.length > 0"> <div class="layui-row layui-col-space20"> <table> <tr> <td v-for="(bk,index) in bookAll" :key="index" class="layui-col-xs2" style="margin-left: 30px"> <a :href="'detail?id='+bk.bookId" class="text"> <div><img :src="'/BookShopSystem_war/' + bk.image1"></div> <p>{{bk.bookName}}</p> <p class="price">￥{{bk.bookPrice}}</p> </a> </td> </tr> </table> </div> </div> </div> <div id="houseList"></div> //列表页——分页 layui.use(['laypage'], function () { var laypage = layui.laypage; laypage.render({ elem: 'houseList' , count: 25 , limit: 5 , theme: '#daba91' , layout: ['page', 'next'] }); }); Vue.config.productionTip = false //阻止vue在启动时生成生产提示 new Vue({ el: "#app", data() { return { bookAll: [] } }, mounted() { var _this = this; axios({ method: 'get', url: 'http://localhost:8080/BookShopSystem_war/getBookAll' }).then(function (result) { var code = result.data.code; var data = result.data.data; if (code == 0) { _this.bookAll = data; } console.log(data) }) } })已省略部分代码，数据都可遍历出来，如何实现分页功能
06-03
在Vue中实现分页功能可以使用第三方库，比如element-ui和iview等，也可以使用layui等前端框架的自带分页组件。下面给出使用layui的示例代码： HTML代码： ``` <div class="layui-container"> <div class="hot-...
vue+iview写个弹框的示例代码
08-28
或者，如果你的项目中使用了 CDN，你可以直接引用 iView 的 CSS 和 JS 文件： ```html <link rel="stylesheet" href="css/iview.css" rel="external nofollow"> <script src="js/iview.min.js"></script> ``` 在...
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
12-11
总结起来，使用iView的日期选择器在Vue.js项目中实现开始时间和结束时间的校验功能，主要涉及以下步骤： 1. 引入Vue.js和iView的CDN资源。 2. 定义Vue实例的`data`，包括开始时间、结束时间以及两个配置对象。 3. 在...
Vue最常用的单词：练习Vue和电子的小项目，创建一个应用程序以读取字幕文件并查找mos使用的单词
02-18
最常用的词 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行单元测试 npm run test:unit 整理和修复文件 npm run lint 自定义配置 请参阅。
vue项目规范文档
01-17
vue项目开发常见规范，可以帮助代码易于阅读，团队合作，提高开发效率，提高个人代码编码规范。
(1) 搭建VS Code的VUE开发环境
weixin_39116068的博客
05-16 194
1. 安装npm 从官网https://nodejs.org/en/download/下载, 安装 2. 安装VS Code 官网:https://code.visualstudio.com/ 3. 配置VS Code上的插件, 参见如下博文即可: https://www.jianshu.com/p/d2e397eb00cd 3. we...
vue vue-element-ui组件 row col布局
热门推荐
oprim的专栏
08-05 1万+
本文仅供参考： 首先你要掌握的基础知识: row 行概念 <el-row></el-row> col 列概念 <el-col></el-col> col组件的:span属性的布局调整,一共分为24栏: 代码示例: <el-row> <el-col :span="24"><div class="grid-content"></div></el-col> </el-row> ...
解决iview中＜/Input＞标签报错的方法
wangchaoqi1985的博客
07-29 602
解决iview中</Input>标签报错的方法
webstorm单标签设置成双标签展开解决iview中col展开问题
GD6570的专栏
09-10 483
大家好！我是木瓜太香，今天给大家带来一个 webstorm 小技巧 场景：有使用过 vue 框架并且使用 iview 做 ui webstorm 做 ide 的同学，可能会遇到一个比较奇怪的问题，iview 中有一个 Col 的组件，这个组件作为一个布局组件存在，但是他和 html 原生标签 col 重复了，iview 中 Col 需要是双标签，原生 html 中 col 是单标签，webstorm 就会认为他是单标签，在展开的时候也就只是单标签了。 解决的办法其实比较简单，我们可以在 webstorm.
HTML ＜col＞ 标签
玄链教育
05-28 1046
col> 标签为表格中一个或多个列定义属性值。如需对全部列应用样式， 标签很有用，这样就不需要对各个单元和各行重复应用样式了。您只能在 table 或 colgroup 元素中使用 标签。
el+vue实战 ③ el-col只显示一行，多余部分用省略号表示
zujiasheng的博客
03-08 4854
效果展示： 代码样式设置： <el-col style=" width: 10rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; </el-col> 其中 width:10rem：设置一行显示字体的宽度。 white-space:nowrap：规定在段落中的文本不换行。 overflow:hidden：元素的内...
HTML col和colgroup元素
cungui5726的博客
08-19 303
Of all the tags used with tables, including those for accessibility, perhaps the most neglected is the col element. The easiest way to describe col is by making a comparison to the div tag: col is an ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值