vue中v-for和v-if不能同时使用 和boolean类型判断问题

直接上代码

<div class="box box-solid box-default" v-for="(rel, key,i) in release">
<div class="col-md-2">
<input type="text" v-model="rel.work_date" v-bind:readonly="true" format="YYYY/MM/DD"
v-if="flag" >
</div>
</div>

flag 和release两个参数都是在vue里data中定义好的两个参数

var vue = new Vue({
el: "#localWorkReleaseVue",
data: {
relflag: flase,//可不可编辑
release: [
{work_date:'2020/05/06'},
{work_date:'2020/05/07'},
],
},
methods: {
},
created:{
}
});

后期处理的时候给flag修改值发现画面并没有变化
经过查阅资料 https://www.cnblogs.com/showjs/p/11376446.html
修改方法

<div class="box box-solid box-default" v-for="(rel, key,i) in release">
<div class="col-md-2">
<input type="text" v-model="rel.work_date" v-bind:readonly="true" format="YYYY/MM/DD"
v-if="rel.relflag" >
</div>
</div>

flag 和release两个参数都是在vue里data中定义好的两个参数

var vue = new Vue({
el: "#localWorkReleaseVue",
data: {
flag: flase,//可不可编辑
release: [
{work_date:'2020/05/06',relflag:true},
{work_date:'2020/05/07',relflag:true},
],
},
methods: {
},
created:{
}
});

1.给release添加属性flag
2.input标签将flag修改成rel.relflag就可以使用了
因为每次循环赋值很麻烦，所以我就想将所有release属性中relflag做成一个对象类型指向一个boolean的引用类型

将data中 flag改成 ：flag : new Boolean(true);

data: {
relflag: new Boolean(true);
release: [ ],
},
created:{
release: [
{work_date:'2020/05/06',relflag:this.flag},
{work_date:'2020/05/07',relflag:this.flag},
],
}

经过实践发现不好用，有可能是我的赋值方式不对，也可能是boolean 的引用类型赋值的时候会转化为基本类型。求大佬告知

另外查阅资料的时候我还发现一个有趣的东西
链接 https://bbs.csdn.net/topics/391999774?list=55647795

var falseobject=new Boolean(false);
alert(falseobject && true); // 结果true
alert(true && falseobject); //结果false

1. JavaScript在进行逻辑转换时会粗暴的将任何对象转为true，而不会调用valueOf函数。
   !!new Boolean(false) ==> true

2. &&运算符和数学上的逻辑运算符号不同：
   l && r
   相当于：
   ToBoolean(l) ? r : l
   即：
   1). 先将“左值”转化为布尔值；
   2). 如果这个布尔值为true，则返回“右值”，如果为false，则返回“左值”；

在规则1，2的作用下：
falseobject && true ==> true
true && falseobject ==> falseobject
第一个的逻辑结果是：true，没有意义；
其实第二个的逻辑结果也是：ture，
!!(true && falseobject) ==> true
只不过alert调用了falseobject 的toString 返回“false”；

因为，逻辑运算 && 是有“交换率”的，这一点JavaScript一定会保证的！

最后

以上就是灵巧信封为你收集整理的vue中v-for和v-if不能同时使用 和boolean类型判断问题的全部内容，希望文章能够帮你解决vue中v-for和v-if不能同时使用 和boolean类型判断问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。