条件渲染与购物车

1.条件渲染

<!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"></script>
    <style>
        .active{
            display: none;
        }
    </style>
</head>
<body>
     <!-- 原生： <p>今天是星期天</p>
     <button onclick="change()">显示</button>
     <script>
        function change()
        {
            let p = document.querySelector('p');
            let button = document.querySelector('button');
            if(button.textContent == '显示')
            {
                button.textContent = '隐藏';
                p.className = 'active';
            }
            else
            {
                button.textContent = '显示';
                p.classList.remove('active');
            }
        }
     </script> -->
     <!-- Vue：  <div class="app">
        <p v-if="flag">今天有个好天气</p>
        <button @click = 'flag = !flag' v-text="flag?'显示':'隐藏'"></button>
     </div>  
     <script>
        Vue.createApp({
            data(){
                return{
                    flag:true,
                }
            }
        }).mount('.app');
        </script>
      -->
      <div class="app">
        <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-if="point>=4000">{{grade[3]}}</p>
      </div>
     <script>
        Vue.createApp({
            data(){
                return{
                    grade: ['纸片会员', '木头会员', '铁皮会员', '金牌会员', '非会员'],
            // 积分
            point: 1500,
                }
            }
        }).mount('.app');
        </script>
</body>
</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>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
      table {
        width: 20em;
        height: 10em;
        text-align: center;
        border-collapse: collapse;
        margin: 1em;
      }
      table caption {
        font-size: 1.2em;
        padding: 1em;
        margin-bottom: 2em;
        border-bottom: 1px solid;
      }
      tbody tr th:first-of-type {
        background: linear-gradient(to left, lightcyan, #fff);
        border-right: 1px solid;
      }
      body tbody tr:not(:last-of-type) > * {
        border-bottom: 1px solid;
      }
    </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>
            <!-- v-model:input中输入多少时num就变成多少 -->
            <td><input type="number" v-model="num" style="width: 5em" /></td>
          </tr>
          <tr>
            <th>金额</th>
            <!-- <td>{{num * price}}</td> -->
            <td>{{amount}}</td>
          </tr>
        </tbody>
      </table>
      <p style="font-size: 1.2em">
        实付金额: {{realAmount}}, 优惠了 :
        <span style="color: red">{{difAmount}}</span>
      </p>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            // 单价
            price: 100,
            // 数量
            num: 0,
            // 折扣
            discount: 1,
          };
        },
        // 计算属性(访问器属性)
        computed: {
          // 计算属性金额 = 单价 * 数量
          // get amount(){
          // }
          amount: {
            get() {
              return this.price * this.num;
            },
            set(value) {
              //...
            },
          },
        },
        // 侦听器属性
        watch: {
          // 访问器属性
          // 被侦听的属性,其实是一个方法，它有二个参数
          // 第一个参数是新值(当前值)，第二个参数是原值(旧值)
          amount(current, origin) {
            console.log(current, origin);
            // 根据当前金额确定打折
            switch (true) {
              // 1000-2000: 9折
              case current >= 1000 && current < 2000:
                this.discount = 0.9;
                break;
              // 2000 -> 3000 : 8折
              case current >= 2000 && current < 3000:
                this.discount = 0.8;
                break;
              // 3000 -> 4000 : 7折
              case current >= 3000 && current < 4000:
                this.discount = 0.7;
                break;
              // 4000 -> 5000 : 6折
              case current >= 4000 && current < 5000:
                this.discount = 0.6;
                break;
              // 5000 : 5折
              case current >= 5000:
                this.discount = 0.5;
            }
            // 实付金额 = 原始金额 * 折扣率
            this.realAmount = this.amount * this.discount;
            // 优惠金额(差价) = 原始金额 - 实付金额
            this.difAmount = this.amount - this.realAmount;
          },
        },
        // 实例生命周期： 当实例与挂载点绑定成功时，自动执行
        mounted() {
          //初始化商品数量，默认为1
          this.num = 1;
        },
      }).mount('.app');
    </script>
  </body>
</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;
}

  table caption {
    font-size: 1.2em;
    padding: 1em;
    margin-bottom: 2em;
    border-bottom: 1px solid;
  }
  tbody tr th:first-of-type {
    background: linear-gradient(to left, lightcyan, #fff);
    border-right: 1px solid;
  }
  body tbody tr:not(:last-of-type) > * {
    border-bottom: 1px solid;
  }
</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>

        <td><input type="number" onchange="change()" style="width: 5em" /></td>
      </tr>
      <tr>
        <th>金额</th>
        <td></td>
      </tr>
    </tbody>
  </table>
  <p style="font-size: 1.2em">
    实付金额:
    <p class="money"></p>
    <span style="color: red" class="sp"></span>
  </p>
</div>
<script>
  function change()
  {
     let input = document.querySelector('td input');
     if(input.value < 0)
     {
    //  let p =  window.prompt('从新输入');
    //  console.log(p);
    window.prompt('从新输入');
    input.value = 0;
     }
     let p = document.querySelector('.money');
     let span = document.querySelector('.sp');
     p.textContent = 100 * input.value;
     if( p.textContent > 800)
     {
      p.textContent =  p.textContent * 0.8;
      span.textContent ='优惠了:' + p.textContent * 0.2;
      // console.log(span);
     }
  }
</script>

</body>
</html>

```

1.条件渲染

购物车

相关文章