Vue.js(7)：v-if、v-else-if、v-else、v-show、v-for

最新推荐文章于 2024-07-17 22:14:26 发布

dawn

最新推荐文章于 2024-07-17 22:14:26 发布

阅读量140

点赞数

分类专栏： Vue.js + ElementUI 文章标签： vue.js r语言前端

本文链接：https://blog.csdn.net/dawn0718/article/details/121066376

版权

Vue.js + ElementUI 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

　　v-if和v-show功能差不多，区别在于v-if如果不显示就注释掉了，而v-show则是通过style="display: none;"来隐藏的，另外v-show不支持v-else和<template>。　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js-V-if、V-show、v-for</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="demo" v-cloak>
        ----------------V-if和V-show 显示与隐藏
        <div v-if="isDisplayed">{{info}}  --  v-if</div>
        <div v-show="isDisplayed">{{info}}  --  v-show</div>
        <a href="" @click.prevent="changeDisplayStatus">{{ isDisplayed?'点击隐藏':'点击显示' }} </a>
        <br>
        ----------------V-if   v-else-if    v-else
        <div v-if="sTemp==='A'">输入字符A看到</div>
        <div v-else-if="sTemp==='B'">输入字符B看到</div>
        <div v-else-if="sTemp==='C'">输入字符C看到</div>
        <div v-else>以上条件都不满足显示</div>
        <input type="text" v-model="sTemp" @input="valueChange" placeholder="请输入A、B、C、D看变化">　你的输入值：{{sTemp}}
        <br>
        ----------------V-for显示数组数据 (注意：要习惯性地加上:key，唯一值)
        <ul>
            <li v-for="(item,i) in studentList" :key="item.id">
                {{item.id}}--{{item.Name}}--{{item.ChineseScore}}-{{item.MathScore}}
            </li>
        </ul>
        <br>
        ----------------V-for显示对象数据
        <ul>
            <li v-for="(val,key,i) in loginUser" :key="i">
                {{key}}--{{val}}--{{i}}
            </li>
        </ul>
        <br>
        ----------------V-for显示列表数字
        <ul>
            <li v-for="(count,i) in 5" :key="i">
                {{i}}--{{count}}
            </li>
        </ul>
    </div>
    
    <script>
        //数据
        var VueDataObj={
            info:'Vus.js',
            sTemp:'B',
            isDisplayed:true,
            studentList:[
                    {Id:101,Name:'小明',ChineseScore:81.5,MathScore:87},
                    {Id:102,Name:'小宋',ChineseScore:61,MathScore:47.5},
                    {Id:103,Name:'小丽',ChineseScore:89.5,MathScore:83},
                ],
            loginUser:{Id:1,name:'陆军',type:'操作员'},
        };
        //方法
        var methods={
            changeDisplayStatus(){
                this.isDisplayed=!this.isDisplayed;
            },
            valueChange(e){
                console.log(this.iTemp);
                console.log(e.target.value);
            },
        };
        //计算属性
        var computed={};
        //监听
        var watch={};
        //Vue应用对象
        var vm=new Vue({
           el:'#demo',
           data:VueDataObj,
           methods,
           computed,
           watch,
       })
   </script>
</body>
</html>

　　显示图：