Vue v-if,v-else-if,v-else的使用

本文轉載自查看原文 2019-10-06 15:41 9217 vue

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的標簽-->
    <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"> 接受協議
    

    <span v-if="!copyright">請先接受協議</span>
    <button v-else>注冊</button>
</div>
<script>
    var app = new Vue({ //實例化vue
        el:'#ask',//vue控制id為ask的元素,
        data:{
            age:0,
            copyright:false
        },

    });
</script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue條件語句v-if、v-else、v-else-if用法 Vue.js 源碼分析(十七) 指令篇 v-if、v-else-if和v-else 指令詳解 vuejs中v-if的深層用法v-else,v-else-if,key VueJS條件語句：v-if、v-else、v-else-if ch6-條件渲染（v-if v-else v-else-if key管理可復用元素 v-show ） VUE-v-if和v-else的使用 Vue 條件判斷 v-if和v-else vue v-for 和 v-if 、v-else一起使用造成的bug vue——動態綁定height以及v-if、v-else的使用 vue顯示隱藏 v-if v-else v-show