在Vue单文件组件的template标签上使用v-if不生效的原因
今天晚上,我在某个组件里看到了这样一段代码,简化来讲,大概长这样:
// Child.vue
<template v-if="false"><div>Foo</div>
</template>// Parent.vue
<template><Child />
</template>
按理来说,这里应该什么都不出现,但是子组件里的Foo却正常显示了。换成下面两种写法组件就能正常隐藏了。
第一种:
// Child.vue
<template><div v-if="false">Foo</div>
</template>// Parent.vue
<template><Child />
</template>
第二种:
// Child.vue
<template><div>Foo</div>
</template>// Parent.vue
<template><Child v-if="false"/>
</template>
我一开始怀疑是template的问题,但是官方文档有使用template的写法:
因为
v-if
是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个元素当做不可见的包裹元素,并在上面使用
v-if。最终的渲染结果将不包含
元素。<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
后来看了一下vue-loader的文档,发现了这么一段:
模板
- 每个
.vue
文件最多包含一个<template>
块。- 内容将被提取并传递给
vue-template-compiler
为字符串,预处理为 JavaScript 渲染函数,并最终注入到从<script>
导出的组件中。
意思是,单文件组件的template相当于是一个标明需要交给Vue的渲染函数进行处理的内容范围的占位符,webpack处理的时候会直接提取出最外层template内的内容,忽略掉template这个标签本身,所以写在template上的属性和指令都是没有用的。
那为什么写在里面的template就能用呢?因为这两个根本不是一个东西,只是正好同名了而已。最外面的那个只是一个占位符,里面的则有实际的用途。
在Vue单文件组件的template标签上使用v-if不生效的原因相关推荐
- vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
- Vue单文件组件的使用
项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码 index.html <!DOCTYPE html> <html lang= ...
- Vue单文件组件与vue-loader
单文件组件 Vue.js是一个渐进式的js框架,在使用wewbpack构建Vue项目时,可以使用一种新的构建模式: .vue单文件组件. 就是一个后缀名为.vue的文件,在webpack中使用vue- ...
- Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件 传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
- vue单文件组件导入导出
目录分析 打开项目,依次分析下目录结构,项目目录结构如下 项目目录结构如下 单文件组件.vue 目完成后,我们看到src 目录下有一个componets 目录,里面有一个 HelloWorld.vue ...
- 什么Vue单文件组件(SFC)?
介绍# Vue 的单文件组件 (即 *.vue 文件,英文 Single-File Component,简称 SFC) 是一种特殊的文件格式,使我们能够将一个 Vue 组件的模板.逻辑与样式封装在单个 ...
- Vue单文件组件基础模板
背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...
- Vue单文件组件环境配置
单文件组件不能直接运行使用,需要依赖node项目对其进行解析打包,在使用之前需要先进行环境配置 安装node版本管理工具nvm curl -o- https://raw.githubuserconte ...
- 【视频】vue单文件组件vue-cli
P13vue单文件组件vue-cli https://www.bilibili.com/video/av91679349?p=13
最新文章
- WebStorm下ReactNative代码提示设置
- 说说.net事件和委托。
- oracle sql语句中包含‘’ 的解决方法
- python个人项目-个人项目WC(Python实现)
- Kali Day01 --- arpspoof命令进行断网攻击(ARP欺骗)
- View-webui controller 功能流程
- IPv6网络协议的安全疑云
- mysql索引空间配置_加入空间mysql索引
- 汉语编程能获得诺贝尔奖
- 前端学习(2491):refused to apply style from ‘‘ because its MIME type (‘text/html‘) is not a supported sty
- 基于句式元学习的Twitter分类
- Shell编程:Bash引号的那点事
- 怎么辨别iPhone手机的真伪?
- CIO,马上就没有线下灾备了,不要做最后一个
- HTML日期时间插件
- 最新2022中国大学排名发布!
- alias别名设置及删除
- 惠普HP DeskJet Ink Advantage Ultra 4729 驱动
- go语言学习-- chan与goroutine
- FPGA设计思想与技巧(转载)
热门文章
- 2020NBA选秀大会结果出炉,开启.fans球星域名抢注!
- ✨数织游戏✨:Python 制作的成本一毛钱却诚意满满的小礼物!!
- ssh访问控制,封杀ip,防止暴力破解
- npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
- SIM900A、GPRS、GSM 基础知识
- 手工命令行打包java工程为war包
- pandas处理字符串
- 低学历转行3D建模有前途吗,游戏3D建模怎么样?
- 怎么引流微信 ,QQ,抖音,淘宝,微博,Facebook好友
- java中学习easyUI的总结——01