【Vue】条件渲染: V-for:列表渲染、条件渲染: v-if和键盘修饰符 - PHP前端

首页 > 博客列表 > 【Vue】条件渲染: V-for:列表渲染、条件渲染: v-if和键盘修饰符

博主信息

博文 94

粉丝 0

访问量 111216

专题推荐

更多>

条件渲染: V-for:列表渲染、条件渲染: v-if和键盘修饰符

1. Vue V-for:列表渲染

<!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>V-for:列表渲染</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div class="app">
        <ul>
            <li>{{cities[0]}}</li>
            <li>{{cities[1]}}</li>
            <li>{{cities[2]}}</li>
        </ul>
        <hr>
        <!-- 数组渲染 -->
        <!-- v-for指令快速循环输出列表 -->
        <ul>
            <!-- key:diff算法,实现高效的渲染，大数量时有用 -->
            <li v-for="(city,key) of cities" :key="key">{{key}} : {{city}}</li>
        </ul>
        <hr>
        <!-- 对象渲染 -->
        <ul>
            <li v-for="(item,key) of user" :key="key">{{key}} : {{item}}</li>
        </ul>
        <hr>
        <!-- 对象渲染 -->
        <ul>
            <li v-for="(item,key) of users" :key="key"> {{item.name}} : {{item.email}} : {{item.phone}}</li>
        </ul>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    // 数组类型
                    cities: ['合肥', '上海', '南京'],
                    // 对象类型
                    user: {
                        name:'老马',
                        email:'nx77@qq.com',
                        phone:'13909511100',
                    },
                    // 对象数组
                    users:[
                    {
                        name:'老马',
                        email:'nx77@qq.com',
                        phone:'13909511100',
                    },
                    {
                        name:'老李',
                        email:'nx88@qq.com',
                        phone:'13909511100',
                    },
                    {
                        name:'老王',
                        email:'nx77@qq.com',
                        phone:'13909511100',
                    },
                    ]
                };
            },
        });
        const vm = app.mount('.app');
    </script>
</head>
<body>
</body>
</html>

2. Vue 条件渲染: v-if

<!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>条件渲染: v-if</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div class="app">
        <!-- v-if:条件渲染指令 -->
        <p v-if="flag">{{message}}</p>
        <!-- !取反操作 ,如：flag = !flag-->
        <button @click="flag = !flag" v-text="flag ? '隐藏':'显示'"></button>
        <!-- if-else,if elseif if -->
        <!-- p >= 1000 and p < 2000 -->
        <p v-if="point >= 1000 && point < 2000">{{grade[0]}}</p>
        <p v-else-if="point >= 2000 && point < 3000">{{grade[1]}}</p>
        <p v-else-if="point >= 3000 && point < 4000">{{grade[2]}}</p>
        <p v-else>{{grade[3]}}</p>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    message: '前端快结束了',
                    flag: true,
                    //会员plus级别
                    grade:['普通会员','高级会员','金牌会员','至尊会员'],
                    //积分
                    point:5000,
                };
            },
        }).mount('.app');
    </script>
</body>
</html>

3. Vue 键盘修饰符

<!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>键盘修饰符</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div class="app">
        <!-- @keyup.enter ：Vue监听鼠标回车事件 -->
        <input type="text" @keyup.enter="submit($event)">
        <ul>
            <li v-for="(item,key) of list">{{item}}</li>
        </ul>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    // 留言列表
                    list: [],
                };
            },
            methods: {
                submit(ev) {
                    // 将输入的字符串放入 list 数组
                    this.list.unshift(ev.target.value);
                    ev.target.value = null;
                },
            },
        }).mount('.app');
    </script>
</body>
</html>

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

【HTML】文档结构与元素，标签，属性的类型

2022-11-27 20:51:59

首页

最新更新

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

条件渲染: V-for:列表渲染、条件渲染: v-if和键盘修饰符

1. Vue V-for:列表渲染

2. Vue 条件渲染: v-if

3. Vue 键盘修饰符