1、如图所示,先创建一个vue实例以便待会演示vue中if和else语句的使用。
2、然后在data中设置一个属性并且该属性为true。然后把这个属性用vue-if来绑定即可。
3、接着打开浏览器便会看到vue-if里面的内容可以显示在网页中。
4、接着把属性值改为false再刷新浏览器看看vue-if所在的标签是否还会显示。
5、如图所示,可以看到vue-if所在标签内容就没有显示出来。这样我们就可以知道当vue-if里面的结果为true时便会显示内容了。反之vue-if则不会显示内容了。
6、如果想要使用else语句的用法则可以在vue-if后面直接使用vue-else指令即可哦。
7、这样,当vue-if条件不成立则会显示vue-else所在标签的内容了哦。
8、特别注意的是true和false不需要加引号噢。还有便是vue-else要在vue-if指令之后噢。
vue.js怎样使用vue-if else
最新推荐文章于 2024-03-11 11:12:35 发布