js的幾種迴圈方式
v-for可以迴圈的變數
可以迴圈的：
陣列、陣列帶索引
物件、物件帶key、value
字串
字串帶索引
數字、數字帶索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>-->
</head>
<body>
<div class="app">
<h1>v-for迴圈陣列</h1>
<span v-for="item in l">{{item}}</span>
<h2>迴圈陣列帶索引</h2>
<div v-for="(item,index) in l">第{{index + 1}}個，值是：{{item}}</div> <!--index索引可以加數字-->
<h1>迴圈物件,預設是value</h1>
<span v-for="item in info">{{item}}<br></span> <!--加br是為了換行-->
<h2>迴圈物件，帶key和value</h2>
<div v-for="(item,key) in info">key值是:{{key}}-----{{item}}</div>
<h1>迴圈字元</h1>
<div v-for="item in s">
<p v-if="item!=' '">{{item}}</p>
<br v-else>
</div>
<h2>迴圈字串---帶索引</h2>
<div v-for="(item,index) in s">
<p v-if="item!=' '">{{item}}----索引是:{{index}}</p>
<br v-else>
</div>
<h2>迴圈數字</h2>
<div v-for="item in 8">{{item}}</div>
<h2>迴圈數字 帶索引</h2>
<div v-for="(item,index) in 8">{{item}} ---索引是:{{index}}</div>
</div>
</body>
<script>
var l1 = [2, 3, 4, 4, 5, 6]
new Vue({
el: '.app',
data: {
l: [1, 2, 3, 4, 5],
info: {name: 'lqz', age: 19},
s: 'hello world'
},
methods: {},
})
</script>
</html>
js的迴圈方式
<script>
// js 的迴圈 基於索引的迴圈 python 沒有基於索引的迴圈 python都是基於迭代的迴圈
// var a = [4,5,6,7,8]
//for(i=0;i<10;i++){
//for (i=0; i<a.length;i++){
// console.log(i)
// console.log(a[i])
// }
//}
// 2 js 的in迴圈 拿到的是索引 跟vue的v-for區分
// var a =[1,5,6,7]
// for (i in a){
// // console.log(i)
// console.log(a[i])
// }
//3 es 6的語法 of迴圈
// var a = [4,5,6,7,8,9]
// for (item of a){
// console.log(item)
// }
// 4 陣列的方法,forEach可以迴圈
// var a = [4,5,6,7,8,9]
// a.forEach(function(item){
// console.log('-----',item)
// })
//
// 5 jq的迴圈 迴圈陣列,物件 需要導juqery
var a = [4,5,6,7,8]
$.each(a,function(index,item){
console.log(index)
console.log(item)
})
</script>
key值的解釋
vue的v-for寫在標籤上，在標籤上加一個key，用屬性指令繫結一個變數，key的值每次都不一樣，這樣可以加速虛擬dom的替換，從而提高迴圈效率，key值必須唯一
<div v-for="item in 8" :key="item">{{item}}</div>
儘量寫上
陣列，物件的檢測與更新
物件，新增一個key-value，發現頁面沒有變化，以後用Vue.set(this.info,'hobby','籃球')設定一下即可
三種情況，前兩種一起用和第三種效果一樣 但是必須是改變資料和新增資料同時，如果只是新增資料用第三種
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>-->
</head>
<body>
<div id="app">
<h1>迴圈物件</h1>
<div v-for="(value,key) in info">
<h3>key值是：{{key}}</h3>
<h2>value值是：{{value}}</h2>
<hr>
</div>
<button @click="handleAdd">點我加資料</button>
</div>
</body>
<script>
var vm =new Vue({
el:'#app',
data:{
info: {name:'lqz',age:19},
},
methods:{
handleAdd(){
// 頁面會變化
// this.info['name']='彭于晏'
// 頁面不會變 但是值有了
// this.info['hobby']= '籃球'
// 遇到資料變了，頁面沒變的情況，都是用
Vue.set(this.info,'hobby','籃球')
}
},
})
</script>
</html>
input事件
| 事件 | 解釋 |
|---|---|
| input | 當輸入框進行輸入的時候，觸發的事件 |
| change | 當元素的值發生改變時，觸發的事件 |
| blur | 當輸入框失去焦點的時候 觸發的事件 |
| focus | 當獲得焦點，觸發的事件 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>-->
</head>
<body>
<div class="app">
<h1>點選事件click</h1>
<input type="text" @click="handleClick">
<h1>失去焦點</h1>
<input type="text" @blur="handleBlur">
<h1>input事件,只要輸入,就會觸發</h1>
<input type="text" @input="handleInput">
<h1>change事件</h1>
<input type="text" @change="handleChange">
<h1>focus事件</h1>
<input type="text" @focus="handleFocus">
</div>
</body>
<script>
new Vue({
el: '.app',
data: {},
methods: {
handleClick() {
alert('點了')
},
handleBlur() {
alert('失去焦點')
},
handleInput() {
alert('輸入觸發')
},
handleChange() {
alert('你變了')
},
handleFocus() {
alert('獲得了')
},
},
})
</script>
</html>
v-model雙向資料繫結
input 可以輸入值，輸入後，就被js變數拿到，如果使用 ：value='變數' 這種形式，頁面中輸入框變化，變數不會變，使用v-model做雙向資料繫結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>-->
</head>
<body>
<div class="app">
<h1>單向資料繫結</h1>
<input type="text" :value="name"> ---->{{name}}--->單向資料繫結
<h2>雙向資料繫結</h2>
<input type="text" v-model="age"> ----->{{age}}---->雙向資料繫結
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
name: 'lqz',
age: 19
},
})
</script>
</html>
過濾案例
箭頭函式推導 加過濾案例應用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>-->
</head>
<body>
<div class="app">
<h1>過濾案例</h1>
<p>請輸入要搜尋的內容: <input type="text" v-model="myText" @input="handleInput"></p>
<ul>
<li v-for="item in newDataList">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
myText:'',
dataList:['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
newDataList:['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
},
methods: {
// handleInput(){
// var _this = this
// this.newDataList = this.dataList.filter((item)=> {
// // 判斷item在不在myText中
//
// // this 指向問題
// // if (item.indexOf(_this.myText) >=0){ //判斷輸入的值 myText是否在item中
// // return true
// // }else{
// // return false
// // }
//
// // 上面簡寫成
// return item.indexOf(_this.myText) >=0
//
//
// })
// }
// },
//
// })
handleInput(){
this.newDataList = this.dataList.filter(
item => item.indexOf(this.myText) >= 0
)
}
},
})
// 補充 1陣列的過濾方法
// var dataList =['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
// var newDataList = dataList.filter(function (item) {
// return false // return true 表示這個值保留, false 表示這個值不要
// })
// console.log(newDataList)
// 補充2 字串的indexOf方法 判斷子字串是否在當前字串中 如果在返回索引 不在返回-1
// var s = 'lqz is handsome'
// var s1 = 'is'
// var i = s.indexOf(s1)
// console.log(i)
// 補充3 es6 的箭頭函式寫法 --》函式中套函式 this指向問題，有了箭頭函式 箭頭函式沒有自己的this
// 1 無引數 沒有返回值的 箭頭函式
// var f = () => {
// console.log('函式')
// }
//2 有一個值 沒有返回值的 箭頭函式 括號可以去掉
// var f = item => {
// console.log(item)
// }
// 3. 有多個引數 沒有返回值的 箭頭函式 括號不能去掉
// var f = (item,key) => {
// console.log(item)
// }
// 4.有一個引數，一個返回值
// var f = (item)=> {
// return item + 'lqz'
// }
// var f = item=> {
// return item + 'lqz'
// }
var f = item => item + 'lqz'
var res= f('lqz')
console.log(res)
// f('lqz')
</script>
</html>
事件修飾符
| 事件修飾符 | 釋義 |
|---|---|
| .stop | 只處理自己的事件，子控制元件冒泡的事件不處理（阻止事件冒泡） |
| .self | 只處理自己的事件，子控制元件冒泡的事件不處理 |
| .prevent | 阻止a連結的跳轉 |
| .once | 事件只會觸發一次（適用於抽獎頁面） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div>
<div class="app">
<h1>事件修飾符stop，子控制元件不再冒泡給父控制元件</h1>
<ul @click='handleUl'>
<li @click.stop="handleLi">第一</li>
<li>第二</li>
</ul>
<h1>事件修飾符self:只處理自己的事件，子控制元件的冒泡，不處理</h1>
<ul @click.self='handleUl'>
<li @click="handleLi">第一</li>
<li>第二</li>
</ul>
<h1>prevent阻止a的跳轉</h1>
<a href="http://www.baidu.com" @click.prevent="handleA">點我看美女</a>
<h1>once 只響應一次</h1>
<button @click.once="handleClick">點我抽獎</button>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {},
methods: {
handleLi() {
console.log('li被點選了')
},
handleUl() {
console.log('ul被點選了')
},
handleA() {
console.log('a標籤被點了')
// 阻止a的跳轉，自己決定要不要跳
// 手動指定跳
location.href = 'http://www.cnblogs.com'
},
handleClick() {
console.log('我被點了')
}
}
})
</script>
</html>
按鍵修飾符
按鍵事件：按了鍵盤某個鍵，就會觸發函式的執行
@keyup = "handleKeyUP"
按鍵修飾符：只有某個按鍵被按下才觸發
@keyup.enter
@keyup.13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>-->
</head>
<body>
<div class="app">
<!-- <input type="text" v-model="text" @keyup="handleKeyUp">--–>{{text}}-->
<!-- <input type="text" v-model="text" @key.13="handleKeyUp2">--–>{{text}}-->
<input type="text" v-model="text" @keyup.enter="handleKeyUp2(1,$event)">---->{{text}}
</div>
</body>
<script>
new Vue({
el: '.app',
data: {
text: '',
},
methods: {
handleKeyUp(event) {
// console.log('按鍵被按下了')
// keyCode 對照表 https://blog.csdn.net/zqian1994/article/details/109486445
// console.log('按鈕被按下了：', event.key, event.keyCode)
if (event.keyCode == 13){
console.log('開始跟後端交換搜尋了')
}
},
handleKeyUp2(a,event) {
console.log(event)
console.log('enter被按了')
}
},
})
</script>
</html>
表單控制
input ---->變數型別是什麼？
text 文字
radio： 單選
checkbox：單選和多選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>-->
</head>
<body>
<div class="app">
<p>使用者名稱: <input type="text" v-model="username"></p>
<p>密碼: <input type="password" v-model="password"></p>
<p>性別:男: <input type="radio" v-model="gender" value="1">
女: <input type="radio" v-model="gender" value="2">
</p>
<p>記住密碼: <input type="checkbox" v-model="remember"></p>
<p>愛好: 籃球: <input type="checkbox" v-model="hobby" value="籃球">
足球: <input type="checkbox" v-model="hobby" value="足球">
乒乓球: <input type="checkbox" v-model="hobby" value="乒乓球">
皮球: <input type="checkbox" v-model="hobby" value="皮球">
</p>
<button @click="handleClick">登入</button>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
username: '',
password: '',
gender: '', // radio單選,多個radio繫結同一個變數，選中某個，就對應value值
remember: false, // checkbox 單選是true或false
hobby: [] // checkbox 多選是陣列型別, 必須一開始定義就是陣列，多個checkbox繫結一個變數
},
methods: {
handleClick() {
console.log(this.username, this.password, this.gender, this.remember, this.hobby)
}
},
})
</script>
</html>
補充：
python的海象運算子 python3.9
Python 海象運算子是在 PEP 572 中提出，並在 Python3.8 版本併入釋出。
海象運算子的英文原名叫 Assignment Expresions ，即 賦值表示式。海象表示式由一個 : 和 一個 = 組成，即：:= 。我們一般稱作 walrus operator（海象運算子），因為它看起來就是一個海象旋轉 90° 而成。
語法：
海象運算子的語法格式是：
(variable_name := expression or value)
即一個變數名後跟一個表示式或者一個值，這個和賦值運算子 = 類似，可以看作是一種新的賦值運算子。
