<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* .box{ display: none; color: red; } */ </style> <script src="./vue.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:'.box', data:{ isShow:false, number:0 } }) } </script> </head> <body> <div class="box"> <!-- v-show 显示和隐藏(true:显示,false:隐藏) 在这里要注意一点,css中如果设置了display会和v-show起冲突 --> <p v-show="isShow">关于显示隐藏</p> <!-- 多重条件 --> <p v-if="number==0">first</p> <p v-else-if="number==1">second</p> <p v-else-if="number==2">third</p> <p v-else>fourth</p> <!-- 单条件 --> <p v-if="isShow">the only one</p> <p v-if="isShow">the second</p> <!-- 条件渲染 指令v-if 隐藏内容,但是这个隐藏和上面v-show和display的隐藏不一样,这里的隐藏是删除了标签,可以检查元素查看 --> <p v-if="isShow">v-if条件渲染删除标签</p> </div> </body> </html>
vue的条件渲染
猜你喜欢
转载自blog.csdn.net/owc1874/article/details/80785793
今日推荐
周排行