Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 条件渲染与购物车
Blogger Information
Blog 47
fans 0
comment 0
visits 21061
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
条件渲染与购物车
P粉036614676
Original
339 people have browsed it

1.条件渲染

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>条件渲染</title>
  8.     <script src="https://unpkg.com/vue@3"></script>
  9.     <style>
  10.         .active{
  11.             display: none;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.      <!-- 原生： <p>今天是星期天</p>
  17.      <button onclick="change()">显示</button>
  18.      <script>
  19.         function change()
  20.         {
  21.             let p = document.querySelector('p');
  22.             let button = document.querySelector('button');
  23.             if(button.textContent == '显示')
  24.             {
  25.                 button.textContent = '隐藏';
  26.                 p.className = 'active';
  27.             }
  28.             else
  29.             {
  30.                 button.textContent = '显示';
  31.                 p.classList.remove('active');
  32.             }
  34.         }
  35.      </script> -->
  36.      <!-- Vue：  <div class="app">
  37.         <p v-if="flag">今天有个好天气</p>
  38.         <button @click = 'flag = !flag' v-text="flag?'显示':'隐藏'"></button>
  39.      </div>  
  40.      <script>
  41.         Vue.createApp({
  42.             data(){
  43.                 return{
  44.                     flag:true,
  45.                 }
  46.             }
  47.         }).mount('.app');
  48.         </script>
  49.       -->
  50.       <div class="app">
  51.         <p v-if="point>=1000 && point< 2000">{{grade[0]}}</p>
  52.       <p v-else-if="point>=2000 && point< 3000">{{grade[1]}}</p>
  53.       <p v-else-if="point>=3000 && point< 4000">{{grade[2]}}</p>
  54.       <p v-if="point>=4000">{{grade[3]}}</p>
  55.       </div>
  56.      <script>
  57.         Vue.createApp({
  58.             data(){
  59.                 return{
  60.                     grade: ['纸片会员', '木头会员', '铁皮会员', '金牌会员', '非会员'],
  61.             // 积分
  62.             point: 1500,
  63.                 }
  64.             }
  65.         }).mount('.app');
  66.         </script>
  67. </body>
  68. </html>

购物车

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>计算属性，侦听器属性</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9.     <style>
  10.       table {
  11.         width: 20em;
  12.         height: 10em;
  13.         text-align: center;
  14.         border-collapse: collapse;
  15.         margin: 1em;
  16.       }
  18.       table caption {
  19.         font-size: 1.2em;
  20.         padding: 1em;
  21.         margin-bottom: 2em;
  22.         border-bottom: 1px solid;
  23.       }
  25.       tbody tr th:first-of-type {
  26.         background: linear-gradient(to left, lightcyan, #fff);
  27.         border-right: 1px solid;
  28.       }
  30.       body tbody tr:not(:last-of-type) > * {
  31.         border-bottom: 1px solid;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="app">
  37.       <table>
  38.         <caption>
  39.           商品结算
  40.         </caption>
  41.         <tbody>
  42.           <tr>
  43.             <th>ID</th>
  44.             <td>HA110</td>
  45.           </tr>
  46.           <tr>
  47.             <th>品名</th>
  48.             <td>伊利纯牛奶</td>
  49.           </tr>
  50.           <tr>
  51.             <th>单价</th>
  52.             <td>100</td>
  53.           </tr>
  54.           <tr>
  55.             <th>数量</th>
  56.             <!-- v-model:input中输入多少时num就变成多少 -->
  57.             <td><input type="number" v-model="num" style="width: 5em" /></td>
  58.           </tr>
  59.           <tr>
  60.             <th>金额</th>
  62.             <!-- <td>{{num * price}}</td> -->
  63.             <td>{{amount}}</td>
  64.           </tr>
  65.         </tbody>
  66.       </table>
  68.       <p style="font-size: 1.2em">
  69.         实付金额: {{realAmount}}, 优惠了 :
  70.         <span style="color: red">{{difAmount}}</span>
  71.       </p>
  72.     </div>
  74.     <script>
  75.       const app = Vue.createApp({
  76.         data() {
  77.           return {
  78.             // 单价
  79.             price: 100,
  80.             // 数量
  81.             num: 0,
  82.             // 折扣
  83.             discount: 1,
  84.           };
  85.         },
  87.         // 计算属性(访问器属性)
  88.         computed: {
  89.           // 计算属性金额 = 单价 * 数量
  90.           // get amount(){
  92.           // }
  94.           amount: {
  95.             get() {
  96.               return this.price * this.num;
  97.             },
  98.             set(value) {
  99.               //...
  100.             },
  101.           },
  102.         },
  104.         // 侦听器属性
  105.         watch: {
  106.           // 访问器属性
  107.           // 被侦听的属性,其实是一个方法，它有二个参数
  108.           // 第一个参数是新值(当前值)，第二个参数是原值(旧值)
  109.           amount(current, origin) {
  110.             console.log(current, origin);
  112.             // 根据当前金额确定打折
  113.             switch (true) {
  114.               // 1000-2000: 9折
  115.               case current >= 1000 && current < 2000:
  116.                 this.discount = 0.9;
  117.                 break;
  119.               // 2000 -> 3000 : 8折
  120.               case current >= 2000 && current < 3000:
  121.                 this.discount = 0.8;
  122.                 break;
  124.               // 3000 -> 4000 : 7折
  125.               case current >= 3000 && current < 4000:
  126.                 this.discount = 0.7;
  127.                 break;
  129.               // 4000 -> 5000 : 6折
  130.               case current >= 4000 && current < 5000:
  131.                 this.discount = 0.6;
  132.                 break;
  134.               // 5000 : 5折
  135.               case current >= 5000:
  136.                 this.discount = 0.5;
  137.             }
  139.             // 实付金额 = 原始金额 * 折扣率
  140.             this.realAmount = this.amount * this.discount;
  142.             // 优惠金额(差价) = 原始金额 - 实付金额
  143.             this.difAmount = this.amount - this.realAmount;
  144.           },
  145.         },
  147.         // 实例生命周期： 当实例与挂载点绑定成功时，自动执行
  148.         mounted() {
  149.           //初始化商品数量，默认为1
  150.           this.num = 1;
  151.         },
  152.       }).mount('.app');
  153.     </script>
  154.   </body>
  155. </html>

原生
```html
<!DOCTYPE html>

<html lang="zh-CN">
<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>
<style>
table {
width: 20em;
height: 10em;
text-align: center;
border-collapse: collapse;
margin: 1em;
}

  1.   table caption {
  2.     font-size: 1.2em;
  3.     padding: 1em;
  4.     margin-bottom: 2em;
  5.     border-bottom: 1px solid;
  6.   }
  8.   tbody tr th:first-of-type {
  9.     background: linear-gradient(to left, lightcyan, #fff);
  10.     border-right: 1px solid;
  11.   }
  13.   body tbody tr:not(:last-of-type) > * {
  14.     border-bottom: 1px solid;
  15.   }
  16. </style>

</head>
<body>
<div class="app">
<table>
<caption>
商品结算
</caption>
<tbody>
<tr>
<th>ID</th>
<td>HA110</td>
</tr>
<tr>
<th>品名</th>
<td>伊利纯牛奶</td>
</tr>
<tr>
<th>单价</th>
<td>100</td>
</tr>
<tr>
<th>数量</th>

  1.         <td><input type="number" onchange="change()" style="width: 5em" /></td>
  2.       </tr>
  3.       <tr>
  4.         <th>金额</th>
  7.         <td></td>
  8.       </tr>
  9.     </tbody>
  10.   </table>
  12.   <p style="font-size: 1.2em">
  13.     实付金额:
  14.     <p class="money"></p>
  15.     <span style="color: red" class="sp"></span>
  16.   </p>
  17. </div>
  19. <script>
  20.   function change()
  21.   {
  22.      let input = document.querySelector('td input');
  23.      if(input.value < 0)
  24.      {
  25.     //  let p =  window.prompt('从新输入');
  26.     //  console.log(p);
  27.     window.prompt('从新输入');
  28.     input.value = 0;
  29.      }
  30.      let p = document.querySelector('.money');
  31.      let span = document.querySelector('.sp');
  32.      p.textContent = 100 * input.value;
  34.      if( p.textContent > 800)
  35.      {
  36.       p.textContent =  p.textContent * 0.8;
  37.       span.textContent ='优惠了:' + p.textContent * 0.2;
  38.       // console.log(span);
  39.      }
  41.   }
  42. </script>

</body>
</html>

```

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：注意重新看一下markdown格式，页面有点问题
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