Vue.js
中
使用最多的两个指令就是
v-if
和 v-for ，因此我们可能会想要同时使用它们。虽然官方不建议这样做，但有时确实是必须的，我们来了解下他们的工作方式：
在
vue
2.x
中
，在一个元素上同时使用
v-if
和 v-for 时， v-for 会优先作用。
在
vue
3.x
中
，
v-if
总是优先于 v-for 生效。
接下来我们通过一个简单的示例来感知下，假设我们想要实现一个极简的 todoList 效果：
我们有一个 todoList：
const todoList = [
id: 0,
task: '吃饭',
done: true,
[eslint-plugin-
vue
]
[
vue
/no-use-
v-if
-with-v-for]
This ‘
v-if
‘ should be moved to the
wrapper
element
当
v-if
与 v-for 一起使用时，v-for比 vi-if的优先级高，这就意味这
v-if
讲重复运行每个v-for循环
中
，所以不推荐一起使用。可以放在循环外，或者放在计算属性里面进行遍历。
1、源码解析
当v-for 和
v-if
在同一级使用时，系统会
报错
This '
v-if
' should be moved to the
wrapper
element
，因为当它们处于同一节点，v-for的优先级比
v-if
更高。这种情况时，for循环还是会走下去。下面我们先从渲染函数再到源码进行分析:
const
Vue
TemplateCompiler = require('
vue
-template-compiler')
const template = '<div v-for="item in 3"
在
Vue
中
使用v-for循环一个数组/对象时，如果再使用
v-if
，那么会提示使用计算属性(能正常使用)，因为
Vue
中
是不提倡v-for与
v-if
同时使用的。
在我的项目
中
也遇到了问题
不过翻看文档解决了修改前：
<div id="act_point"
v-for="(item,index) in positions" :key="index"
v-if
="lines.line.lin...
那些年踩过的坑
module not found
Module not found: Error: Can't resolve 'views/coverConfigurationRong' in 'D:\new-operation-admin\src\js\router'
原因：写好路由之后，新建文件夹目录，但是没有给一个带export的入口（出口）文件，于是找不到模块。
_.assign() _.assign(object, [sources]
const rst = await api.initDat
（1）手段：
v-if
是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
（2）编译过程：
v-if
切换有一个局部编译/卸载的过程，切换过程
中
合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
（3）编译条件：
v-if
是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行
[BScroll warn]: Can not resolve the
wrapper
DOM.
Vue
better-scroll
[
Vue
warn]: Error in mounted hook: “TypeError: Cannot read property ‘children’ of undefined”
出现上述问题，只需要把
v-if
改成v-show即可。
当
v-if
与v-for一起使用时，v-for具有比
v-if
更高的优先级，这意味着
v-if
将分别重复运行于每个v-for循环
中
所以，不推荐
v-if
和v-for同时使用
使用推荐方式：
v-for="user in activeUsers"
:key="user.id"
{{ u...
Vue
自定义指令是
Vue
提供的一种拓展语法，用于扩展
Vue
的功能。实现
v-if
效果，需要新增一个自定义指令，例如v-visible。主要思路是在指令
中
通过binding.value获取到值，对元素进行判断并修改样式。
具体实现步骤如下：
1. 在
Vue
实例的directive选项
中
添加v-visible指令：
```
javascript
Vue
.directive('visible', {
bind: function(el, binding) {
// 绑定时立即执行一次更新
el.style.display = binding.value ? 'block' : 'none';
update: function(el, binding) {
// 更新时根据值的变化修改样式
el.style.display = binding.value ? 'block' : 'none';
2. 在需要使用
v-if
效果的元素上添加v-visible指令：
```html
<div v-visible="show">这里是需要
v-if
的内容</div>
3. 在
Vue
实例
中
设置show的值，控制元素的显示与隐藏：
```
javascript
new
Vue
({
el: '#app',
data: {
show: true
在执行完以上三个步骤后，就可以通过
Vue
自定义指令v-visible实现
v-if
效果了。
需要注意的是，v-visible指令是一种比较简单的实现方式，如果涉及到较为复杂的逻辑判断，建议使用
Vue
的计算属性computed或watch监听数据的变化，并在模板
中
根据计算结果动态渲染元素。
