vue箭頭函式、js-for迴圈、事件修飾符、摁鍵事件和修飾符、表單控制、完整購物車版本

认真的六六發表於2024-04-26
Vue函式JS事件

【箭頭函式】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 7 
 8 </head>
 9 <body>
10 <div id="app">
11     <h1>過濾案例---箭頭函式</h1>
12     <input type="text" v-model="myText" @input="handleInput">
13     <hr>
14     <ul>
15         <li v-for="item in newdataList">{{item}}</li>
16     </ul>
17 
18 </div>
19 
20 </body>
21 <script>
22     var vm = new Vue({
23         el: '#app',
24         data: {
25             myText: '',
26             dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'atome', 'atomem'],
27             newdataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'atome', 'atomem'],
28         },
29         methods: {
30             handleInput() {
31                 this.newdataList = this.dataList.filter(item=> item.indexOf(this.myText) >= 0)
32             },
33         }
34     })
35 
36     //箭頭函式的使用
37     //1.匿名函式
38     var f=function(name){
39         console.log(name)
40     }
41     f('豬豬俠')
42 
43     //2.箭頭函式--其實是為解決this指向問題,無引數無返回值
44     var f1=()=>console.log('豬大強')
45     f1()
46     //3.箭頭函式有多個引數無返回值
47     var f2=(name,age)=>{console.log(name,age)}
48     f2()
49     //4.箭頭函式有一個引數無返回值
50     var f3=name=>{console.log(name)}
51     f3('光頭強')
52     //5.有一個引數，一個返回值
53     var f4=name=>{return name+'是一隻熊'}
54     console.log(f4('熊二'))
55     //6.5簡寫
56     var f5=name=>name+'也是一隻熊'
57     console.log(f5('熊大'))
58     //補充：箭頭函式內部沒有自己的this
59 </script>
60 
61 </html>

。

。

。

【js-for迴圈的方式】

　　迴圈：普通索引、陣列、of迭代迴圈、in索引迴圈、forEach陣列、each物件迴圈

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 7      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 8 
 9 </head>
10 <body>
11 <div id="app">
12     <h1>js-for迴圈方式</h1>
13 
14 </div>
15 
16 </body>
17 <script>
18     //es6補充：之前定義變數用var,但會有問題，以後用let,const
19     //let和const的區別：const定義的變數不能修改，let定義的變數可以修改,區域性變數，只在作用域內有效
20     //1.普通索引迴圈
21     for(let i=0;i<10;i++){console.log(i)}
22     console.log('-----------------------------')
23     //2.迴圈陣列
24     l=[1,2,3,4,5]
25     for(let i=0;i<l.length;i++){console.log(l[i])}
26      console.log('-----------------------------')
27     //3.基於迭代的迴圈,of迴圈，迴圈出一個個值
28     for (let item of l){console.log(item)}
29      console.log('-----------------------------')
30     //4.基於迭代的迴圈,in迴圈,迴圈出索引
31     for (let index in l){console.log(l[index])}
32      console.log('-----------------------------')
33     //5.陣列獨有的迴圈方式：forEach
34     l.forEach((item,index)=> {console.log(item,index)})
35     console.log('-----------------------------')
36     //6.jquery的each迴圈
37     $.each(l,(index,item)=>{console.log(item,index)})
38 </script>
39 
40 </html>

。

。

。

【事件修飾符】　　

　　.stop 只處理自己的事件，父控制元件冒泡的事件不處理（阻止事件冒泡）

　　.self 只處理自己的事件，子控制元件冒泡的事件不處理

　　.prevent 阻止a連結的跳轉

　　.once 事件只會觸發一次（適用於抽獎頁面）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 7     <style>
 8         .top {
 9             height: 200px;
10             width: 200px;
11             background-color: palegreen;
12             margin: auto;
13         }
14 
15         .inner {
16             height: 50px;
17             width: 100px;
18             background-color: orange;
19             margin: auto;
20         }
21     </style>
22 </head>
23 <body>
24 <div id="app">
25     <h1>事件修飾符---stop</h1>
26     <div class="top" @click="handleTop">
27         <!--    加了stop的點選事件,點子是子，父是父-->
28         <div class="inner" @click.stop="handleInner">點點看</div>
29     </div>
30 
31     <h1>修飾符----self</h1>
32         <div class="top" @click.self="handleTop">
33             <div class="inner" @click="handleInner">點點看</div>
34         </div>
35 
36      <h1>修飾符----prevent:a就不會跳轉了</h1>
37     <a href="https://www.baidu.com" @click.prevent="handleA">我是百度啊</a>
38 
39 
40     <h1>修飾符----once:只觸發一次</h1>
41     <button @click.once="handleOnce">按鈕</button>
42 
43 </div>
44 
45 
46 </body>
47 
48 <script>
49     var vm = new Vue({
50         el: '#app',
51         data: {},
52         methods: {
53             handleTop: function () {
54                 console.log('父控制元件')
55             },
56             handleInner: function () {
57                 console.log('子控制元件')
58             },
59             handleA(){
60                 console.log('a被點了')
61                 // 控制頁面跳不跳
62                 location.href='https://www.sohu.com'
63             },
64             handleOnce(){
65 
66                 console.log('只觸發一次')
67             }
68         }
69     })
70 </script>
71 </html>

。

。

。

【摁鍵事件和修飾符】

# 1 按下某個鍵盤，觸發事件，透過修飾控制只有按下某個鍵，才觸發事件

#2 keyCode對應表--》按鍵修飾符

　　鍵盤對應的數字表： https://www.cnblogs.com/841019rossi/p/16808455.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 7 
 8 </head>
 9 <body>
10 <div id="app">
11     <h1>按鍵事件---</h1>
12     <input type="text" v-model="name" @keyup="handleKeyUp">---{{name}}
13 
14     <h1>按鍵修飾符---vue3只有數字，沒有enter</h1>
15     <input type="text" v-model="name1" @keyup.13="handleKeyUp1">---{{name}}
16 </div>
17 
18 
19 </body>
20 
21 <script>
22     var vm = new Vue({
23         el: '#app',
24         data: {
25             name:'',
26             name1:'',
27         },
28         methods:{
29             handleKeyUp:function (event) {
30                 console.log('你按下了Enter鍵:',event)
31             },
32               handleKeyUp1:function () {
33                 console.log('你是數字Enter鍵:enter')
34             },
35         }
36     })
37 </script>
38 </html>

。

。

。

【表單控制】

# 1 checkbox v-model 繫結 -布林 ：選中沒選中 -陣列：多選

# 2 radio： -字串：value的值

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 7 
 8 </head>
 9 <body>
10 <div id="app">
11     <h1>表單控制checkbox---選中沒選中，繫結布林值</h1>
12     <p>使用者名稱： <input type="text" v-model="name"></p>
13     <p>密碼： <input type="text" v-model="password"></p>
14     <p>確認密碼： <input type="checkbox" v-model="isChecked"></p>
15     <button @click="handleSubmit">登入</button>
16 
17     <h1>checkbox多選---繫結字串，返回的是陣列裡面套對應的value值</h1>
18     <p>使用者名稱： <input type="text" v-model="name"></p>
19     <p>密碼： <input type="text" v-model="password"></p>
20     <p>確認密碼： <input type="checkbox" v-model="isChecked"></p>
21     <p>愛好：
22         籃球：<input type="checkbox" v-model="hobby" value="籃球">
23         足球：<input type="checkbox" v-model="hobby" value="足球">
24         乒乓球：<input type="checkbox" v-model="hobby" value="乒乓球">
25     </p>
26     <button @click="handleSubmit">登入</button>
27 
28     <h1>radio多選---</h1>
29     <p>使用者名稱： <input type="text" v-model="name"></p>
30     <p>密碼： <input type="text" v-model="password"></p>
31     <p>確認密碼： <input type="checkbox" v-model="isChecked"></p>
32     <p>性別：
33         男：<input type="radio" v-model="gender" value="男">
34         女：<input type="radio" v-model="gender" value="女">
35 
36     </p>
37     <p>愛好：
38         籃球：<input type="checkbox" v-model="hobby" value="籃球">
39         足球：<input type="checkbox" v-model="hobby" value="足球">
40         乒乓球：<input type="checkbox" v-model="hobby" value="乒乓球">
41     </p>
42     <button @click="handleSubmit">登入</button>
43 
44 </div>
45 </body>
46 
47 <script>
48     var vm = new Vue({
49         el: '#app',
50         data: {
51             name: '',
52             password: '',
53             isChecked: false,
54             hobby: [],
55             gender: '',
56         },
57         methods: {
58             handleSubmit() {
59                 console.log(this.name, this.password, this.isChecked, this.hobby,this.gender)
60             }
61         }
62     })
63 </script>
64 </html>

。

。

。

【購物車案例】

　選中、全選、 加減

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
  8           integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  9     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
 10             integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim"
 11             crossorigin="anonymous"></script>
 12     <style>
 13         button{
 14             background-color: darkgray;
 15             border-radius: 8px;
 16         }
 17     </style>
 18 </head>
 19 <body>
 20 <div id="app">
 21     <div class="row justify-content-center">
 22         <div class="col-6">
 23             <h1 class="text-center">購物車</h1>
 24             <table class="table">
 25                 <thead>
 26                 <tr>
 27                     <th scope="col">商品id</th>
 28                     <th scope="col">名字</th>
 29                     <th scope="col">價格</th>
 30                     <th scope="col">數量</th>
 31                     <th scope="col">全選/全不選<input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
 32                 </tr>
 33                 </thead>
 34                 <tbody>
 35                 <tr v-for="(item,index) in goods_list" :class="index%2==0?'table-danger':'table-primary'">
 36 
 37                     <td>{{item.id}}</td>
 38                     <td>{{item.name}}</td>
 39                     <td>{{item.price}}</td>
 40                     <td><button @click="handleJian(item)">-</button>{{item.num}} <button  @click="item.num++">+</button></td>
 41                     <td><input type="checkbox" :value="item" v-model="checkGoods" @change="handleCheckOne"></td>
 42                 </tr>
 43 
 44                 </tbody>
 45             </table>
 46 
 47 
 48             總價：{{getPrice()}}
 49             <br>
 50             詳情：{{checkGoods}}------{{checkAll}}
 51 
 52         </div>
 53     </div>
 54 
 55 </div>
 56 </body>
 57 <script>
 58     var vm = new Vue({
 59         el: '#app',
 60         data: {
 61             goods_list: [{id: 1, name: 'iphone', price: 5000, num: 10},
 62                 {id: 2, name: 'huawei', price: 4000, num: 10},
 63                 {id: 3, name: 'xiaomi', price: 3000, num: 10},
 64                 {id: 4, name: 'oppo', price: 2000, num: 5},
 65                 {id: 5, name: 'vivo', price: 1000, num: 10},
 66                 {id: 6, name: 'meizu', price: 1500, num: 10}],
 67             checkGoods: [],
 68             checkAll: false
 69         },
 70         methods: {
 71             getPrice() {
 72                 let totalPrice = 0;
 73                 // for (let i=0;i<this.goods_list.length;i++){
 74                 //     totalPrice+=this.goods_list[i].price*this.goods_list[i].num;}
 75                 //     for (let item of this.goods_list){
 76                 for (let item of this.checkGoods) {
 77                     totalPrice += item.price * item.num
 78                 }
 79                 return totalPrice
 80             },
 81             handleCheckAll() {
 82                 if (this.checkAll) {
 83                     this.checkGoods = this.goods_list
 84                 } else {
 85 
 86                     this.checkGoods = []
 87                 }
 88             },
 89             handleCheckOne() {
 90                 if (this.checkGoods.length == this.goods_list.length) {
 91                     this.checkAll = true
 92                 } else {
 93                     this.checkAll = false
 94                 }
 95             },
 96             handleJian(item){
 97                 if(item.num>0){
 98                     item.num--
 99                 }else {
100                     alert('不能再減了')
101                 }
102             }
103         }
104     })
105 </script>
106 </html>

相關文章