条件:v-if

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

自由学三年,把想法变成现实。33 折优惠(最后 7 天), 现在订阅 →

v-if 还有 v-show 这两个指令,都可以根据某个值的真假动态的显示元素 .. 我这里有个 message ,现在我把它绑定到一个地方显示出来 ... 先添加点结构元素 ... 一个 div ,加上几个类 ... 一组 p 标签,里面绑定显示一个 message 表示的内容 ...

显示的就是一个带边框的文字 ... 现在我想让整个元素根据一个值动态的显示 .. 在这个包装元素的上面,添加一个 v-if 指令 ... 它的值是 loggedIn ... 意思就是,如果 loggedIn 的值是 true 的话,就渲染这个元素 ..

在应用里添加一个这样的数据 .. 先让它等于 true ... 回到浏览器 .. 页面上仍然会显示这个带边框的 hello .. 在控制台上我们可以设置一下 loggedIn 的值,让它等于 false ... 你会发现,显示的元素就不见了 .. 也就是使用了 v-if 指令的这个元素现在不会被渲染 ...

跟 v-if 相似的还有一个 v-show 指令,把 v-if 换成 v-show .. 设置一下 loggedIn 的值,让它等于 flase ... 不太一样的是,这个指令会在元素上应用一个隐藏元素的样式,就是这个 display: none ... v-if 会让整个元素不出现 ...

还有一个 v-else .. 可以在上面这个元素不渲染情况下渲染应用了 v-else 指令的元素 ... 先把 v-show 换成 v-if ...

然后再添加一个 div ui.yellow.segment .. 一组 p 标签,包装点静态的文字 ..

然后在这个 div 上面添加一个 v-else 指令 ...

现在页面上显示的是这个 hello ,因为 loggedIn 这个数据是 true ... 再把它设置成 false ... 你会发现,现在显示的是应用了 v-else 指令的元素里的内容 ...

条件:v-if《 Vue.js 前端框架 》

统计

10670
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点