text html js中增加if判断,Vue.js中的v-if和v-show等判断条件失效的原因及解决方法

摘要：

学习Vue.js已经半个月了，慢慢的也上手了一些。Vue中的v-if,v-show以及自定义事件这些功能在简化着我们的代码，很轻松就能控制一些复杂的操作。但如果使用不当，也会失效......

话说前段时间艺灵在摸索Vue.js 2.0，现在一晃半个月过去了，不能说完全没有收获，但也不能说收获有多大。总之是边踩坑边学习中......

今天主要说学习过程中遇到的一个常见问题，也许看官曾经或将来会遇到。

啥问题呢，就是：v-if、v-show以及引申到绑定Class类、绑定Id选择器等等。可能这样说，看官还是不太好理解。说人话就是：真假条件判断的问题。如果还不能理解，请恕艺灵表达能力欠缺，咱们代码见吧！

友情提示：如果看官还没有接触过这个Vue的话，如果对其感兴趣，可以去官网了解了解。

Vue官网地址：http://cn.vuejs.org/

一、v-if条件判断

1.1、html代码

看官现在可以看到我哦^o^

乍一看好像没什么特殊的地方，艺灵已将需要注意的地方用黄色高亮表示出来了。就是一个v-if="ok"而已。此处的v-if是一个条件判断，而后面的ok就是判断的值。此处是一个布尔值，即true或false。

下面我们需要来运行下上面的代码，毕竟Vue官方文档中的例子多半都需要自己手动补充完才能看到效果。

1.2、完整核心代码

看官现在可以看到我哦^o^

var vm=new Vue({

el:'#app'

,data:{

ok:true

}

})

1.3、调试代码

此时打开页面我们就能看到上面的文字了，然后打开浏览器的控制台，按F12即可。(友情提示：扔掉过时的IE浏览器吧......)

接着我们点击Console，在下面输入：vm.ok=false;然后回车，此时页面上刚显示的那段话就没有了哦~，然后再输入：vm.ok=true;并回车，我们又可以看到那段话了。是不是很好玩？配图一张：瞅瞅demo？

估计很多看官跟着实例都做出了效果，是不是感觉已经会了？

如果看官觉得会了的话，可以跟着Vue官网上的实例，试着将v-show和v-bind:class的一些实例打出来。

友情提示：接下来讲的代码会用到双向数据绑定即v-model指令、自定义事件即v-on以及简单的html知识。看官量力而行~

二、v-if之单选按钮控制文本显隐

如果将上面的例子应用到实际中，用控制台切换显然是不符合要求的。我们需要搞个按钮或下拉菜单或单选框或复选框等其他方式来替代控制台的操作。于是，我们有了下面的代码。

2.1、完整核心代码

小样，你还想控制我的自由？没门，我就不听话~

请选择：

隐藏　

显示

val：{{val}}；ok：{{ok}}

var vm=new Vue({

el:'#app'

,data:{

ok:true

,val:true

}

,methods:{

inpclick:function(){

this.ok=this.val;

}

}

})

为了更加清楚的看到ok和val的动态变化，艺灵已在页面上写出对应的代码。现在看官只需要点击单选按钮即可看到值的变化和显示或隐藏刚才的那段话了。配图一张：瞅瞅demo？

咦！奇怪，不管我怎么点击，当值已经变成false时，那段话咋还显示呢？难道就真的不能控制它吗？？？

2.2、此false非彼false，此true非彼true！

纳尼？！此false非彼false，此true非彼true！艺灵你在逗我？页面上明明显示了true和false，为什么要说不是呢？

2.3、typeof打印值的类型

为了找到答案，我们需要打印下选中值的类型。因为在之前1.3的例子中，是用布尔值来成功控制文字的显隐的。我们对上面的代码进行修改下。

2.3.1、新增代码

console.log(typeof this.val)

现在我们再来切换单选按钮，可以看到控制台中一直输出的都是string！所以说，此时的false非布尔的false了，所以自然不会像之前那样乖乖听话了。

三、解决方法

既然找到了问题所在，解决的话看官应该知道怎么做了吧，此处的解决方法也不局限于一种，下面艺灵贴出几种方法供参考，如有错误还请指出~

3.1、方法一

/*js不变，只修改html代码*/

将原来的v-if="ok"修改成v-if="ok!='false'"即可

3.2、方法二

/*html不变，修改inpclick中的条件*/

if(this.val=="false"){

this.ok=false

}else{

this.ok=true

}

3.3、方法三

/*html不变，修改inpclick中的条件和新增一个data数据*/

/*新增一个data数据*/

,togg:{

"false":false

,"true":true

}

/*修改inpclick*/

this.ok=this.togg[this.val]

除了上面的3种方法，可能还有一些更好的方法，如果看官有的话，可以分享到评论区中哦~

一看时间已经凌晨2点多了，就不再啰嗦了，到此收笔！

四、最后

对于v-show和:class中需要判断的值，都可以使用3中提到的方法来解决。

----------完----------

转载声明：

若亲想转载本文到其它平台，请务必保留本文出处！

本文链接：http://www.yilingsj.com/xwzj/2017-02-18/481.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。