简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 【Vue】条件渲染: V-for:列表渲染、条件渲染: v-if和键盘修饰符
Blogger Information
Blog 94
fans 0
comment 0
visits 91863
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
【Vue】条件渲染: V-for:列表渲染、条件渲染: v-if和键盘修饰符
可乐随笔
Original
1448 people have browsed it

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

1. Vue V-for:列表渲染

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>V-for:列表渲染</title>
  9.     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  11.     <div class="app">
  12.         <ul>
  13.             <li>{{cities[0]}}</li>
  14.             <li>{{cities[1]}}</li>
  15.             <li>{{cities[2]}}</li>
  16.         </ul>
  17.         <hr>
  18.         <!-- 数组渲染 -->
  19.         <!-- v-for指令快速循环输出列表 -->
  20.         <ul>
  21.             <!-- key:diff算法,实现高效的渲染，大数量时有用 -->
  22.             <li v-for="(city,key) of cities" :key="key">{{key}} : {{city}}</li>
  23.         </ul>
  24.         <hr>
  25.         <!-- 对象渲染 -->
  26.         <ul>
  27.             <li v-for="(item,key) of user" :key="key">{{key}} : {{item}}</li>
  28.         </ul>
  29.         <hr>
  30.         <!-- 对象渲染 -->
  31.         <ul>
  32.             <li v-for="(item,key) of users" :key="key"> {{item.name}} : {{item.email}} : {{item.phone}}</li>
  33.         </ul>
  34.     </div>
  37.     <script>
  38.         const app = Vue.createApp({
  39.             data() {
  40.                 return {
  41.                     // 数组类型
  42.                     cities: ['合肥', '上海', '南京'],
  43.                     // 对象类型
  44.                     user: {
  45.                         name:'老马',
  46.                         email:'nx77@qq.com',
  47.                         phone:'13909511100',
  48.                     },
  49.                     // 对象数组
  50.                     users:[
  51.                     {
  52.                         name:'老马',
  53.                         email:'nx77@qq.com',
  54.                         phone:'13909511100',
  55.                     },
  56.                     {
  57.                         name:'老李',
  58.                         email:'nx88@qq.com',
  59.                         phone:'13909511100',
  60.                     },
  61.                     {
  62.                         name:'老王',
  63.                         email:'nx77@qq.com',
  64.                         phone:'13909511100',
  65.                     },
  66.                     ]
  67.                 };
  68.             },
  69.         });
  70.         const vm = app.mount('.app');
  71.     </script>
  72. </head>
  74. <body>
  76. </body>
  78. </html>

2. Vue 条件渲染: v-if

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>条件渲染: v-if</title>
  9.     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  11. </head>
  13. <body>
  14.     <div class="app">
  15.         <!-- v-if:条件渲染指令 -->
  16.         <p v-if="flag">{{message}}</p>
  17.         <!-- !取反操作 ,如：flag = !flag-->
  18.         <button @click="flag = !flag" v-text="flag ? '隐藏':'显示'"></button>
  19.         <!-- if-else,if elseif if -->
  20.         <!-- p >= 1000 and p < 2000 -->
  21.         <p v-if="point >= 1000 && point < 2000">{{grade[0]}}</p>
  22.         <p v-else-if="point >= 2000 && point < 3000">{{grade[1]}}</p>
  23.         <p v-else-if="point >= 3000 && point < 4000">{{grade[2]}}</p>
  24.         <p v-else>{{grade[3]}}</p>
  25.     </div>
  26.     <script>
  27.         Vue.createApp({
  28.             data() {
  29.                 return {
  30.                     message: '前端快结束了',
  31.                     flag: true,
  32.                     //会员plus级别
  33.                     grade:['普通会员','高级会员','金牌会员','至尊会员'],
  34.                     //积分
  35.                     point:5000,
  36.                 };
  37.             },
  38.         }).mount('.app');
  39.     </script>
  40. </body>
  41. </html>

3. Vue 键盘修饰符

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>键盘修饰符</title>
  9.     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  11. </head>
  13. <body>
  14.     <div class="app">
  15.         <!-- @keyup.enter ：Vue监听鼠标回车事件 -->
  16.         <input type="text" @keyup.enter="submit($event)">
  17.         <ul>
  18.             <li v-for="(item,key) of list">{{item}}</li>
  19.         </ul>
  20.     </div>
  21.     <script>
  22.         Vue.createApp({
  23.             data() {
  24.                 return {
  25.                     // 留言列表
  26.                     list: [],
  27.                 };
  28.             },
  29.             methods: {
  30.                 submit(ev) {
  31.                     // 将输入的字符串放入 list 数组
  32.                     this.list.unshift(ev.target.value);
  33.                     ev.target.value = null;
  34.                 },
  35.             },
  36.         }).mount('.app');
  37.     </script>
  38. </body>
  39. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！