条件渲染与购物车 - JavaScript

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

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>