简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1. 实例演示条件渲染与列表渲染 2. (选做): 使用计算属性,侦听器属性和键盘修饰符等知识 , 重写之前的购物车案例 3. 预习组件知识
Blogger Information
Blog 46
fans 2
comment 0
visits 19475
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
1. 实例演示条件渲染与列表渲染 2. (选做): 使用计算属性,侦听器属性和键盘修饰符等知识 , 重写之前的购物车案例 3. 预习组件知识
P粉314265155
Original
295 people have browsed it

事件绑定

  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>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！