vue 中 使用v-if，v-else报错：v-else used on element ＜view＞ without corresponding v-if

最新推荐文章于 2024-05-18 22:52:04 发布
最新推荐文章于 2024-05-18 22:52:04 发布
阅读量4.8k 收藏 2
点赞数 1
分类专栏： vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiliGong1/article/details/123591615
版权
本文介绍了在 Vue 中如何利用 v-show 属性代替 v-if 实现搜索框的显示与隐藏。由于 v-if 和 v-else 必须连续使用，中间不能插入其他元素，否则会导致显示问题。通过切换 v-show 的布尔值，可以避免这个问题，实现更灵活的控制组件的显隐状态。
摘要由CSDN通过智能技术生成

解决：：将v-else 改成v-show， 解决搜索框显示与隐藏。v-if ,v-else,v-else-if 要紧接着使用，中间没有其它元素，不然显示不出来会报错

LiliGong1
关注
专栏目录
Vue 08使用v-model实现计算器
mqingo的博客
01-02 608
08使用v-model实现计算器.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>08使用v-model实现计算器</title> <script type="text/javascript&quot
Vue 16v-if和v-show的特点
mqingo的博客
01-02 1943
16v-if和v-show的特点.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>16v-if和v-show的特点</title> <script type="text/javascript&quot
v-else used on elementwithout corresponding v-if
kking666的博客
07-15 658
v-else used on element without corresponding v-if
Vue使用v-if和v-else报错
weixin_43469563的博客
06-29 5450
如题,前端小白一个,刚开始学vue,直接上代码: <div id="app"> <div v-if="isActive">显示</div> <div v-else >隐藏</div> <button @click="changeAAA">click</button> </div> <script> new Vue({
报错 | Error compiling template:v-else used on element ＜span
A123ppleQueen的博客
01-13 572
报错
uniapp报错v-else/v-else-if has no adjacent v-if or v-else-if.
最新发布
qq_62933419的博客
05-18 513
报错v-else/v-else-if has no adjacent v-if or v-else-if.查了一下才知道， v-else 指令没有紧挨着。
Vue warn]: Error compiling template:
小菜吉的博客
10-19 336
作为前端小白，在初始Vue是，总是会遇到很多问题（属于那种大佬看了会笑死，你看了会难死的类型），常见的模板引用错误 为什么呢，其实只是我们没有系统学过Vue2到Vue3，在2.X之前,Vue是允许在一个模版内存在多个平行的根节点的。emmmm~~ 怪不得会衍生出现在这个问题。但现在只允许一个模板只能有一个根节点，可以理解成单个根节点可以更好的提高重新渲染的性能，并且让Vue更好的管理当前的虚拟dom。 ...
Vue v-model指令的学习
mqingo的博客
01-02 4414
v-model指令的学习.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;v-model指令的学习&lt;/title&gt; &lt;script type="text/javascript" src=&q
Vue 官方笔记--组件
小菜的博客
07-24 2891
中文版(英文浓缩) 组件是什么？ 组件：具有预定义选项的实例 组件是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用 通过 prop ，我们可以实现父子组件之间的解耦，有了属性，子组件中就可以使用更为复杂的模板和逻辑，比如如下 <!-- 复制到 html 中可以直接运行哦，看看是什么结果吧 --> <div id="main"> <ol> <!-- 子组件 --> <todo-item v-for=
Vue 13v-for循环对象.html
mqingo的博客
01-02 2314
13v-for循环对象.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;13v-for循环对象&lt;/title&gt; &lt;script type="text/javascript" src=&quo
开发VUE框架项目时报错：Errors compiling template
Kaite_han的博客
07-09 3919
vue-cli这个脚手架工具运行输出栏中的报错： 这个错误可以通过翻译知道我们缺少一个结束标签，同时编译工具也给我们指出了缺少结束标签的元素位置，那么给此元素加上结束标签即可，图中加上 即可 ...
vue-loader was used without the corresponding plugin.
qq_37160067的博客
04-29 4371
为了引入.vue文件，安装完vue-loader和vue-template-compiler后，运行报错：vue-loader was used without the corresponding plugin.Make sure to include VueLoaderPlugin in your webpack config.百度了一下，是因为vue-loader，15的版本需要再添加plug...
webpackvue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin
热门推荐
nightwishh的博客
06-18 1万+
新建新项目配置vue-loader打包vue后发现报错 查阅文档发现v15版的vue-loader配置需要加个VueLoaderPlugin 解决方案1：把vue-loader回到v14版本 npm uninstall vue-loader npm install vue-leader@14.2.2 解决方案2：修改webpack.config.js 新增第2，36，37，38行 再次...
Vue框架：使用v-if的小问题
leizhang_cn的博客
07-23 187
使用v-if指令化时，注意之间不能留有空格，否则控制台会报错。
vue 使用v-if时遇到的问题
lx_1024的博客
02-07 1万+
在vue中使用v-if时遇到的问题记录v-if和v-else之间不能加入其它的元素，否则会报错，错误为：v-else used on element &lt;input&gt; without corresponding v-if，错误示例如下：&lt;input type="text" v-if="id===0"&gt; &lt;span&gt;提示信息&lt;/span&gt; &lt;p v
vue(常用指令、:key标识符、属性绑定与数据流)
此鱼非闲鱼也的博客
04-16 1670
vue指令 在 vue 中，指令是一个带有 v- 前缀的属性，与普通属性不一样的地方是， 指令的值是用引号括起来的 表达式，不同的指令有不同的作用， vue内置了一些常用的指令，而且我们还可以自定义指令。 1、内容输出指令： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
做Vue项目的bug
m0_49416118的博客
07-13 478
报错：‘npm’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。 解决方法：确保下载node.js以后给电脑和webstorm分别配置坏境。 ‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。 解决方法： 更新node.js版本：npm i -g n --force ...
Vue基础入门学习笔记 一
weixin_45131334的博客
10-19 258
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值