Vue v-if,v-else-if,v-else的使用
生活随笔
收集整理的這篇文章主要介紹了
Vue v-if,v-else-if,v-else的使用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
v-else-if 要緊跟 v-if
v-else要緊跟v-else-if 或 v-if
代碼:
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>vue.js v-if語法使用 </title><script src="vue.js"></script><script src="node_modules/axios/dist/axios.js"></script><script src="node_modules/lodash/lodash.js"></script> </head> <body> <div id="ask"><!--vue不能控制body和html的標(biāo)簽--><input type="text" v-model="age"><span v-if="age<20">小孩</span><span v-else-if="age<30">青年</span><span v-else-if="age<40">中年</span><span v-else>老年</span><hr><input type="checkbox" v-model="copyright"> 接受協(xié)議<span v-if="!copyright">請先接受協(xié)議</span><button v-else>注冊</button> </div> <script>var app = new Vue({ //實例化vueel:'#ask',//vue控制id為ask的元素,data:{age:0,copyright:false},}); </script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的Vue v-if,v-else-if,v-else的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue Bootstrap 静态服务器
- 下一篇： vue+vant 移动端H5 商城项目_