简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >1. 实例演示条件渲染与列表渲染 2. (选做): 使用计算属性,侦听器属性和键盘修饰符等知识 , 重写之前的购物车案例 3. 预习组件知识

1. 实例演示条件渲染与列表渲染 2. (选做): 使用计算属性,侦听器属性和键盘修饰符等知识 , 重写之前的购物车案例 3. 预习组件知识

P粉314265155
P粉314265155原创
2022年08月09日 07:41:07291浏览

事件绑定

  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. </head>
  10. <body>
  11.     <!-- es6 -->
  12.     <p> 
  13.        <!-- <a href="https://www.baidu.com" onclick = "showURL( )">URL地址跳转  </a> -->
  15.                                                                    <!-- 事件属性 -->
  16.          <a href="https://www.php.cn" onclick="showUrl()">显示地址一 : </a>
  17.         <span  class="url"> </span>
  18.     </p>
  21.         <!-- vue -->
  22.         <div class="app">
  23.         <p >
  24.             <!-- <a href="https://www.baidu.com" onclick = "showURL( )">URL地址跳转  </a>
  25.              -->
  26.                                                          <!-- 事件属性   v-on    @  -->
  27.              <a href="https://www.php.cn" @click="showUrl1($event)">显示地址二 : </a>
  28.             <span  class="url1">{{url1}} </span>
  29.         </p>
  31.     </div>
  33. <!-- 简化 -->
  35. <div class="app">
  36.     <p  onclick="   console.log(   '你好呀');">
  37.         <!-- <a href="https://www.baidu.com" onclick = "showURL( )">URL地址跳转  </a>
  38.          -->
  39.                                                      <!-- 事件属性   v-on    @  -->
  40.          <a href="https://www.php.cn" @click="showUrl2($event)">显示地址三 : </a>
  41.         <span  class="url2">{{url2}} </span>
  42.     </p>
  44. </div>
  49.     <script>
  50.     // 为事件属性绑定 事件方法
  51.         function showUrl(){
  52.         //    禁用跳转行为
  53.         event.preventDefault();
  55.         console.log(   EventTarget);
  56.         console.log(event.target);
  57.         console.log(event.target.href);
  58.         console.log(event.currentTarget);
  59.         console.log(event.currentTarget.href);
  60.         console.log('=======================');
  61.         // 获取下一个兄弟节点event.nextElementSibling.textConent     
  62.         console.log(event.target.nextElementSibling);
  63.         // 下一个兄弟节点内容修改   
  64. //   event.target.nextElementSibling.textContent = event.target.href;
  65.   console.log('+++++++++++++++++++++++++++++');
  66.      }
  67.                    </script>
  68.                    <!-- // 为事件属性绑定 事件方法  VUE -->
  69.                    <script>
  70.      Vue.createApp({
  71.         //  实例数据
  72.         data() {
  73.             return {
  74.                 // 插值变量
  75.                 url1: null,  
  76.             };
  77.         },
  78.     // 事件方法
  79.     methods: {
  81.         showUrl1( ev){
  82.             ev.preventDefault();
  83.             console.log(ev);
  84.             console.log(ev.target.href);      
  85.             console.log(ev.currentTarget.href);      
  86.             this.url1 = ev.currentTarget.href;
  87.         },
  89.     },
  90.        }).mount('.app');
  91.                    </script>
  92. </body>
  93. </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. </head>
  10. <body>
  11.     <div class="app">
  12.         <p  onclick="   console.log(   '你好呀');">
  13.             <!-- <a href="https://www.baidu.com" onclick = "showURL( )">URL地址跳转  </a>
  14.              -->
  15.                                                          <!-- 事件属性   v-on    @  -->
  16.              <a href="https://www.php.cn" @click.prevent.stop="showUrl2($event)">显示地址三 : </a>
  17.             <span  class="url2">{{url2}} </span>
  18.         </p>
  20.     </div>
  24.        <!-- // 为事件属性绑定 事件方法  VUE -->
  25.        <script>
  26.         Vue.createApp({
  27.            //  实例数据
  28.            data() {
  29.                return {
  30.                    // 插值变量
  31.                    url2: null,  
  32.                };
  33.            },
  34.        // 事件方法
  35.        methods: {
  36.            showUrl2( ev){
  37.             // 其中   ev.preventDefault();和 ev.stopPropagation();  可以简化 用修饰符简化， 如 @click.prevent.stop="showUrl2($event)"
  38.              //    去掉时间点击跳转行为
  39.             //    ev.preventDefault();
  40.             //    去掉冒泡行为
  41.             //    ev.stopPropagation();
  43.                console.log(ev);
  44.                console.log(ev.target.href);      
  45.                console.log(ev.currentTarget.href);      
  46.                this.url2 = ev.currentTarget.href;
  47.            },
  49.        },
  50.           }).mount('.app');
  51.                       </script>
  52. </body>
  53. </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. </head>
  10. <body>
  11. <div class="app">
  12.        <!-- 数组 array -->
  13.        <p>{{cities}}</p>
  14.        <p>{{cities[1]}}</p>
  15.        <ul>
  16.         <li>{{cities[1]}}</li>
  17.         <li>{{cities[2]}}</li>
  18.        </ul>
  19.        <!-- fot of 循环数组 
  20.      for(let item of array) {
  22.      }
  23.     -->
  24.        <!-- v-for ：指令循环输出 -->
  25.        <ul>
  26.         <li  v-for="city of cities">{{city}}</li>
  27.        </ul>
  28.        <ul>
  29.         <!-- index    是键 key ，可以激发diff算法    city是值value       :key 等于 v-bind:key -->
  30.                                             <!-- 注意 of前后空格 -->
  31.         <li  v-for="(city,index) of cities"  :key="index">{{index}}:{{city}}</li>
  32.        </ul>
  33.        console.log('=====');
  34.        <p>{{cities}}</p>
  35.        <hr>
  36.        <!-- v-for   对象数组 -->
  37.        <ul>
  38.                                   <!-- prop属性 -->
  39.         <li  v-for="(user,prop,index) of users"  :key="index">{{index}}:{{user}}</li>
  40.         <li  v-for="(user,prop,index) of users"  :key="index">{{user.name}},{{user.email}}</li>
  41.        </ul>
  42.        <hr>
  43.        <ul>
  44.          <!--    对象 -->
  45. <li  >{{user.name}}：{{user.email}}</li>
  46. </ul>
  49. </div>
  50.     <script>
  51.     const app = Vue.createApp({
  52.     data() {
  53.         return {
  54.             // 数组  array 
  55.             cities:['1','2','3','4','5'],
  56.             //  对象  object    关联数组 
  57.             user:{
  58.                 name:'小狗',
  59.                 email:'123@qq.com',
  60.             },
  61.             // 对象数组 array of object
  62.             users :[
  63.             {
  64.                 name:'小猫',
  65.                 email:'123@qq.com',
  66.             },
  67.             {
  68.                 name:'小牛',
  69.                 email:'123@qq.com',
  70.             },
  72.             ],
  74.             }
  75.         },
  77.     }, ).mount('.app');
  78.     </script>
  79. </body>
  80. </html>

条件渲染v-if

  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>条件渲染v-if</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9. </head>
  10. <body>
  11.     <div class="app">
  12.       <p>{{message}}</p>
  13.       <p  v-if = 'true'>{{message}}，ture显示</p>
  14.       <p  v-if = 'false'>{{message}}，false不显示</p>
  15.       <p  v-if = 'flag'>{{message}}</p>
  17.       <!-- 开关控制 -->
  18.       <!-- <button>隐藏</button> -->
  19.      <hr>
  20.      <button v-text = 'flag?"隐藏":"显示"'></button>
  21.      <br>
  22.      <button v-text = 'flag1?"隐藏":"显示"'></button>
  23.      <hr>
  24.      <p  v-if = 'flag'>{{message}}</p>
  25.      <button @click = 'flag=!flag' v-text = 'flag1?"隐藏":"显示"'></button>
  26.     <hr>
  27.      <!-- if -else   if     else  if   else   -->
  28.      <!-- <p v-if ='point'>{{grade[4]}}</p> -->
  29.      console.log('=======');<br>
  30.      <p v-if ='point>100 && point< 1000'>{{grade[0]}}</p>
  31.      <!-- console.log('=======');<br>   条件判断中间不能加其他的标签 -->
  32.      <p v-else-if='point>=2000 && point< 3000'>{{grade[1]}}</p>
  33.      <p v-else-if="point>=3000 && point< 4000">{{grade[2]}}</p>
  34.      <p v-else-if="point>=5000 && point< 6000">{{grade[3]}}</p>
  35.      <!-- <p v--else-if="point>=4000 && point< 5000">{{grade[3]}}</p> -->
  36.      <p v-else>{{grade[4]}}</p>
  37.     </div>
  42. <script>
  43. const app = Vue.createApp({
  44.     data() {
  45.         return {
  46.               message:'今天好热',
  47.             //   true 显示   false 不显示    style = display: none
  48.               flag :true,
  49.               flag1 :false,
  50.               grade:['普通','银卡','金卡','白金','非会员'],
  51.               point:5100,
  53.         };
  54.     },
  55. }).mount('.app');
  56. </script>
  57. </body>
  58. </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>Document</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9. </head>
  10. <body>
  11.     <div class="app">
  12.   <!-- <input type="text"  @keydown = 'submit($event)'> -->
  13.   <!-- enter  键盘修饰符    回车-->
  14.   <input type="text"  @keydown.enter = 'submit($event)'>
  15.   <ul>
  16.       <!-- :key  为了增加渲染的效率 -->
  17.     <li v-for="(item ,index) of list"   :key="index">{{item}}  </li>
  18.   </ul>
  19.     </div>
  22.     <script>
  23.  Vue.createApp({
  24. data() {
  25.     return {
  26.         // 留言列表
  27.    list:[],
  28.     };
  29. },
  31. methods: {
  32.           submit(ev) {
  33.             console.log(ev);
  34.             if (ev.key === 'Enter') {
  35.             //   this.list.unshift(ev.currentTarget.value);
  36.             //   ev.currentTarget.value = null;
  37.             }
  39.             this.list.unshift(ev.currentTarget.value);
  40.             ev.currentTarget.value = null;
  41.           },
  42.         },
  43. // methods: {
  44. //     submit:(ev){
  45. //         console.log(ev);
  46. //         if (ev.key =='Enter'){
  47. //             this.List.unshift(ev.currentTarget.value);
  48. //         }
  49. //     }
  50. // },
  51. }).mount('.app');
  52.     </script>
  53. </body>
  54. </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. </head>
  10. <style>
  11.     table {
  12.       width: 20em;
  13.       height: 10em;
  14.       text-align: center;
  15.       border-collapse: collapse;
  16.       margin: 1em;
  17.     }
  19.     table caption {
  20.       font-size: 1.2em;
  21.       padding: 1em;
  22.       margin-bottom: 2em;
  23.       border-bottom: 1px solid;
  24.     }
  26.     tbody tr th:first-of-type {
  27.       background: linear-gradient(to left, lightcyan, #fff);
  28.       border-right: 1px solid;
  29.     }
  31.     body tbody tr:not(:last-of-type) > * {
  32.       border-bottom: 1px solid;
  33.     }
  34.   </style>
  35. </head>
  36. <body>
  37.   <div class="app">
  38.     <table>
  39.       <caption>
  40.         商品结算
  41.       </caption>
  42.       <tbody>
  43.         <tr>
  44.           <th>ID</th>
  45.           <td>HA110</td>
  46.         </tr>
  47.         <tr>
  48.           <th>品名</th>
  49.           <td>伊利纯牛奶</td>
  50.         </tr>
  51.         <tr>
  52.           <th>单价</th>
  53.           <td>100</td>
  54.         </tr>
  55.         <tr>
  56.           <th>数量</th>
  57.                                                        <!-- v- modle 双向绑定 -->
  58.           <td><input type="number" v-model="num" style="width: 5em" /></td>
  59.         </tr>
  60.         <tr>
  61.           <th>金额</th>
  63.           <!-- <td>{{num * price}}</td> -->
  64.           <td>{{amount}}</td>
  65.         </tr>
  66.       </tbody>
  67.     </table>
  69.     <p style="font-size: 1.2em">
  70.         实付金额: {{realAmount}}
  71.       <br>
  72.         优惠了 :
  73.         <span style="color: red">{{difAmount}}</span>
  74.       </p>
  75.   </div>
  76.   <script>
  78.     const app = Vue.createApp({
  79.         data() {
  80.             return {
  81.             // 单价
  82.             price: 100,
  83.             // 数量
  84.             num: 0,
  85.             // 折扣
  86.             discount: 1,
  87.           // 实际金额
  88.         //   realAmount:100,
  89.         //   优惠金额
  90.         difAmount:0,
  92.             };
  93.         },
  94.         // 计算器属性
  95.         computed:{
  96.         //  计算属性金额 = 单价乘以数量
  97.         // get amount(){
  99.         // },
  100.         amount:{
  101.         get(){
  102.       return this.price * this.num;
  103.         },
  104.         set (value){
  106.         },
  107.         },
  108.         },
  110.         // 侦听器属性
  111.         watch:{
  112.         //    访问器属性实现。看着是属性，实际是方法
  113.         // 被侦听的 属性其实一个方法  有两个参数组装，第一是 新值当前值  第二个值是原来的值，以前的旧值
  114.             amount( current,origin){
  115.                 // console.log('当前'+ current ,'旧值'+origin);
  116.                   // 根据当前金额确定打折
  117.                   switch (true) {
  118.               // 1000-2000: 9折
  119.               case current >= 1000 && current < 2000:
  120.                 this.discount = 0.9;
  121.                 break;
  123.               // 2000 -> 3000 : 8折
  124.               case current >= 2000 && current < 3000:
  125.                 this.discount = 0.8;
  126.                 break;
  128.               // 3000 -> 4000 : 7折
  129.               case current >= 3000 && current < 4000:
  130.                 this.discount = 0.7;
  131.                 break;
  133.               // 4000 -> 5000 : 6折
  134.               case current >= 4000 && current < 5000:
  135.                 this.discount = 0.6;
  136.                 break;
  138.               // 5000 : 5折
  139.               case current >= 5000:
  140.                 this.discount = 0.5;
  141.             } 
  142.                                         //    实付金额 =原始金额*折扣率
  143.             // this.realAmount =  this.amount  * this.discount;
  144.             // 优惠金额（差价）  =原始金额 -实付金额
  145.             // this.difAmount =  this.amount   -    this.realAmount ;     
  146.                         // 实付金额 = 原始金额 * 折扣率
  147.                         this.realAmount = this.amount * this.discount;
  148.                          console.log(this.realAmount);
  149. // 优惠金额(差价) = 原始金额 - 实付金额
  150. this.difAmount = this.amount - this.realAmount;
  151.             },
  153.         },
  154.           // 实例的声明周期，当实例与挂载点绑定成功时，自动执行
  155.   mounted(){
  156.         this.num =1;
  157.       }
  158.         // 挂载
  159.     }).mount('.app');
  161.   </script>
  162. </body>
  163. </html>
上一条：实例演示组件注册的二种方式,以及组件之间的通信方式下一条：类数组和dom元素获取遍历
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多