vue中v-bind提示的一个小错误，单双引号混乱问题

最新推荐文章于 2024-05-26 21:26:03 发布
最新推荐文章于 2024-05-26 21:26:03 发布
阅读量1.1w 收藏 3
点赞数 5
分类专栏： 个人笔记 文章标签： vue debug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46526358/article/details/115482439
版权

vue中v-bind提示的一个小错误，单双引号混乱问题

一、发现问题

在写一个管理系统时，发现vue突然报了个关于v-bind的错误，具体问题如下

error    'v-bind' directives require an attribute value

在这里插入图片描述

二、代码部分

排查了许久发现是这个地方的代码有问题

<el-dialog :title="operateType == 'add'? "xxx": 'yyy'" :visible.sync="isShow"></el-dialog>

原来是这个地方的单引号和双引号交叉使用时出现了错误，最外层使用了双引号之后内层不应该再使用双引号而是应该使用单引号。将双引号修改之后就不再报错了。

<el-dialog :title=" operateType == 'add'? 'xxx': 'yyy' " :visible.sync="isShow"></el-dialog>

三、总结

这个问题是因为粗心大意引起的，在这里记录一下，警示自己以后不要再犯。

番薯仔
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解vue中v-bind:style效果的自定义指令
10-15
在Vue中，`v-bind:style` 是一个用于动态绑定CSS样式的指令，它可以接受对象或字符串，方便地根据数据变化更新元素的样式。而自定义指令则是Vue提供的一种扩展机制，允许开发者自定义DOM操作。 1. **自定义指令**：...
vue里面v-bind和Props 利用props绑定动态数据的方法
10-18
在Vue.js框架中，`v-bind` 和 `props` 是两个关键的概念，它们主要用于在父组件和子组件之间传递数据。本文将详细讲解如何利用 `v-bind` 和 `props` 来绑定动态数据。 首先，`v-bind` 是Vue的一个指令，它的作用是...
vue学习（3）—动态绑定属性 v-bind
Java code farmer
09-09 1011
v-bind指令： 1、直接绑定到class上， 格式：v-bind：，语法糖 直接写一个英文冒号 ： 2、v-bind指令的对象语法 class后面跟一个对象：{key:value,.....} v-bind绑定style： ...
[vue error] vue3中使用同名简写报错 ‘v-bind‘ directives require an attribute value
JiuMeilove的博客
05-26 403
默认情况下，ESLint 将同名缩写视为错误。此外，Volar 扩展可能需要更新以支持 Vue 3.4 中的新语法。安装或更新 Volar 扩展以获得对 Vue 3.4 语法的支持。
vetur插件提示 'v-for' directives require 'v-bind:key' directives.错误的解决办法
weixin_30615767的博客
06-26 1693
在用vscode编写vue代码时，因为安装的有vetur插件，所以当代码中有v-for语法时，会提示 [vue-language-server] 'v-for' directives require 'v-bind:key' directives. 我们知道vue在升级到2.2后，当在组件中使用v-for时，key现在是必须的。 下面是vue官方文档的说明： 回头...
v-bind绑定无效 - Vue
Clearlight's Blog
10-27 7546
页面不显示 控制台报错 : vue2.4.js:465 [Vue warn]: Failed to generate render function: SyntaxError: Unexpected token ',' in with(this){return _c('div',{attrs:{"id":"app"}},[_c('input',_b({attrs:{"type":"butt...
支配vue框架模版语法之v-bind
weixin_34303897的博客
07-21 97
ArthurSlog SLog-19 Year·1 Guangzhou·China July 21th 2018 微信扫描二维码，关注我的公众号 不管你接不接受 意外总会发生 人生就是由各种各样的意外组成 重要的是 你的那颗炙热的心是否还在燃烧 开发环境MacOS(High Sierra 10.13.5) 需要的信息和信息源： 本文的所有源码地址 vue.js 的...
详解vue中v-model和v-bind绑定数据的异同
10-14
本篇文章将深入解析Vue中的两种主要数据绑定方式：`v-model` 和 `v-bind`，以及它们之间的异同。 `v-bind`（通常简写为 `:`）主要用于单向数据绑定，即将Vue实例中的数据属性绑定到HTML元素的属性上。例如，使用 `v...
详解VUE中v-bind的基本用法
08-29
在 Vue 中，v-bind 是一个非常重要的指令，它用于将数据绑定到 HTML 元素的属性上。本篇文章将详细介绍 v-bind 的基本用法，包括 v-bind:class 和 v-bind:style 两个方面。 v-bind:class v-bind:class 用于动态地...
vue中v-bind 、 v-model 案例
最新发布
07-11
vue中v-bind 、 v-model 案例
vue v-bind的属性报错找不到
weixin_44518466的博客
08-02 1230
浏览器会将v-bind:[特性名]里的特性名强制转换为小写，导致vue实例的data属性特性名没有对应，才会导致错误，所以特性名直接写为小写就行了
Vue3 报v-bind is missing expression.vue(34)错误的解决方案
yyh520025的博客
05-15 483
Vue3 报v-bind is missing expression.vue(34)错误的解决方案
v-bind
qq_44278908的博客
03-01 193
v-bind
eslint-plugin-vue 的使用
你的世界我做主
04-17 1万+
💿 安装 通过vue-cli（推荐）： vue add @vue/cli-plugin-eslint 通过npm安装 : npm install --save-dev eslint eslint-plugin-vue 通过yarn安装： yarn add -D eslint eslint-plugin-vue 环境要求： ESLint v6.2.0 及以上 Node.js v12.22.x、v14.17.x、v16.x 及以上 📖用法 配置 在项目根目录创建.eslintrc.js 示例.eslin
‘v-model‘ directives require the attribute value which is valid as LHS vue/valid-v-model
qq_58719130的博客
05-21 4090
'v-model' directives require the attribute value which is valid as LHS vue/valid-v-model
【vue解决v-for报错 [vue/valid-v-for]Custom elements in iteration require ‘v-bind:key‘ directives】
m0_65450343的博客
06-23 6266
v-for报错 [vue/valid-v-for]Custom elements in iteration require ‘v-bind:key’ directives.eslint-plugin-vue 原因：这是因为安装的enlint插件，它会对代码的规范进行检查。我这里用到v-for，但它是需要key值的，当不根据它的代码规范来执行的时候，自然而然就报错了。 解决办法：根据需求，不需要的话去掉eslint 中的代码规范检查即可。 找到 文件->首选项->设置 里面输入：vetur validat
VScode 自动修复vue项目中eslint报错
LLDD2014425程序猿
12-18 5502
1、安装插件 eslint-plugin-vue npm i -g eslint-plugin-vue 2、修改项目跟路径下的文件：.eslintrc | .eslint.js 添加vue选项 3、添加eslint 和 vetur 插件 4、修改vscode首选项配置 【汉化版 文件&gt;首选项&gt;设置找到对应的配置文件】 【英文版 file&gt;preferences&gt;se...
ESLint配置：eslint默认及自定义规则介绍
热门推荐
mrzhangdulin的博客
09-02 2万+
ESLint 配置 一、eslint 安装 1、全局安装 npm i -g eslint 全局安装的好处是，在任何项目我们都可以使用eslint的全局命令进行代码规则操作，但是这对我们的意义并不大，后续会详细介绍； 全局安装之后，要求相关的eslint插件页必须全局安装，这对多人开发项目来说会比项目安装更加繁琐。所以，我们这里采用在项目上安装eslint： 2、项目安装 npm i -D esli...
vue中v-bind
07-28
v-bind指令用于在Vue中实现属性的动态绑定。它可以将一个或多个attribute，或者一个组件prop动态绑定到表达式。在Vue中，v-bind可以使用简写形式，即使用冒号(:)来代替v-bind指令。例如，可以使用v-bind或者简写形式:来绑定一个img标签的src属性，如下所示： ``` <img v-bind:src="imageSrc"> ``` 或者简写为： ``` <img :src="imageSrc"> ``` 需要注意的是，在属性值内不能直接使用插值操作，例如不能直接写入类似于`<h1 :style="font-size:50px;color:red;">this is test</h1>`的语法。如果想要在元素节点的属性上绑定Vue的data数据，需要使用v-bind指令。例如，可以使用v-bind指令将data中的tit数据绑定到h1标签的title属性上： ``` <h1 v-bind:title="tit">this is test</h1> ``` 这样，h1标签的title属性就会与data中的tit数据进行绑定，实现了属性的动态更新。 #### 引用[.reference_title] - *1* [【Vue】Vue中v-bind的使用](https://blog.csdn.net/weixin_34727238/article/details/106949433)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Vue中的v-bind指令基本用法和介绍](https://blog.csdn.net/qq_41196217/article/details/117253289)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值