PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布
首页
课程
路径
文章
PHP培训
精品课
下载
最新更新

博客列表 > Vue列表渲染与条件渲染

Vue列表渲染与条件渲染

子墨吖ฅฅ
子墨吖ฅฅ 原创
2022年11月21日 15:36:43 470浏览 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Vue列表渲染与条件渲染</title>
  6. </head>
  7. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  8. <body>
  9.     <div class="app">
  10.         <span>列表渲染</span>
  11.         <li v-for="(city,key) of cities" :key="key">{{key}} : {{city}}</li>
  12.     </div>
  13.     <div class="app2">
  14.         <span>条件渲染</span>
  15.         <p v-if="point < 1000">{{grade[4]}}</p>
  16.         <p v-if="point >= 1000 && point < 2000">{{grade[0]}}</p>
  17.         <p v-else-if="point >= 2000 && point < 3000">{{grade[1]}}</p>
  18.         <p v-else-if="point >= 3000 && point < 4000">{{grade[2]}}</p>
  19.         <p v-else-if="point >= 4000">{{grade[3]}}</p>
  20.     </div>
  21. </body>
  22.     <script>
  23.         // 列表渲染
  24.         Vue.createApp({
  25.                     data() {
  26.                         return {
  27.                             // array
  28.                             cities: ['合肥', '上海', '南京'],
  29.                         }
  30.                     }
  31.                 }).mount('.app');
  32.         // 条件渲染
  33.         Vue.createApp({
  34.             data() {
  35.                 return {
  36.                     // 会员Plus级别
  37.                     grade: ['纸片会员', '木头会员', '铁皮会员', '金牌会员', '非会员'],
  38.                     // 积分
  39.                     point: 500,
  40.                 }
  41.             }
  42.         }).mount('.app2');
  43.     </script>
  44. </html>
上一条： HTML中DOM树遍历的方法及案例 下一条： 海淘商城APP/小程序平台开发源码设计方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多
热门课程