vue（v-if,v-else-if-else-show）

news2024/11/24 0:15:06

基本应用

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTE-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Vue-快速入门</title>
<script src="js/vue.js"></script></head>
<body>
<div id ="app">
    年龄<input type="text"  v-model="age">经判断为
    <span v-if="age<=35">年轻人</span>
    <span v-else-if="age > 35 && age < 60">中年人</span>
    <span v-else>老年人</span>
    <br><br>

</div>
</body>
<script>
//定义vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
        age:20
        },
        methods:{

        }
    })
</script>
</html>

对比一下v-show

  年龄<input type="text"  v-model="age">经判断为
    <span v-show="age<=35">年轻人</span>
    <span v-show="age > 35 && age < 60">中年人</span>
    <span v-show="age>=60">老年人</span>

区别

一个是不渲染，一个是display为none

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTE-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Vue-快速入门</title>
<script src="js/vue.js"></script></head>
<body>
<div id ="app">
    <div v-for="addr in addrs">{{addr}}</div>
    <div v-for="(addr,index) in addrs">{{index}}:{{addr}}</div>
</div>
</body>
<script>
//定义vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
        addrs:["北京","上海","西安","深圳"]
        },
        methods:{

        }
    })
</script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1827039.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！