网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容

如何使用Vue.js2中的v-else-if指令判断条件

时间:2024-10-12 00:54:51

1、第一步,在HBuilder新建的VueJS项目中,创建静态页面velseif.html,如下图所示:

如何使用Vue.js2中的v-else-if指令判断条件

2、第二步,在title标签下方,引入Vue.js的核心JavaScript文件,注意是2.x版本的,如下图所示:

如何使用Vue.js2中的v-else-if指令判断条件

3、第三步,在<body></body>标签内,插入一个无序列表,并在li标签内添加v-if、v-else-if和v-else指令,判断flag变量的值,对应的显示值,如下图所示:

如何使用Vue.js2中的v-else-if指令判断条件

4、第四步,保存代码并在浏览器中查看效果,这时可以看到六项都显示出来了,如下图所示:

如何使用Vue.js2中的v-else-if指令判断条件

5、第五步,在<ul></ul>下方插入<script></script>,定义和初始化Vue(),给flag值为“3”,如下图所示:

如何使用Vue.js2中的v-else-if指令判断条件

6、第六步,再次保存代码并查看预览效果,可以看到显示第三级,显示第三个值,如下图所示:

如何使用Vue.js2中的v-else-if指令判断条件
© 2025 小知经验
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com