js的几种循环方式
1.v-for可以循环的变量
* 数组 （带索引 index要和item在一个括号里 ）
* 对象 （默认是vaule值 想获取key 把key和item写一个括号里 ）
* 字符串 （空格也算字符想把空格也打印出来 要加判断）
* 数字
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="item in l">{{item}}</p> //数组
<p v-for="(index,item) in l">索引{{index}},{{item}}</p> //带索引的数组
<p v-for="item in d">{{item}}</p>//对象 默认是value
<p v-for="(key,item) in d">key:{{key}},{{item}}</p> //带key的对象
<p v-for="item in s">{{item}}</p> //字符串
<div v-for="item in s"> //打印出空格
<p v-if="item != ' '">{{item}}</p>
<br v-else>
</div>
<p v-for="item in 5">{{item}}</p> //打印数字
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
l: [1, 2, 3],
d: {name: 'joyce', age: 18},
s: 'hi joyce',
}
})
</script>
</html>
2.js的循环方式
* js的for循环基于索引的循环 python没有给予索引的循环 python都是基于迭代的循环
for(i=0;i<10;i++){
console.log(i)
var a=[4,5,6]
for (i = 0;i<a.length;i++){
console.log(a[i])
}
*js 的in循环 拿到的是索引 跟vue的v-for区分
var a =[4,5,6]
for (i in a){
// console.log(i) //拿索引
console.log(a[i]) //拿数据值
}
*es 6语法 of循环
var a = [4,5,6]
for (item of a){
console.log(item)
}
*数组的方法 forEach可以循环
var a = [4,5,6,7]
a.forEach(function (item) {
console.log(item)
})
*jq 的循环 循环数组 对象
var a = [4 , 2 , 3]
$.each(a,function (index,item) {
console.log(index)
console.log(item)
})
key值的解释
vue的v-for写在标签上 在标签上加一个key 用属性指令绑定一个变量 key的值每次都不一样 这样可以加速虚拟dom的替换 从而提高循环效率 key值必须唯一
<div v-for="item in 8" :key="item">{{item}}</div>
数据，对象的检测与更新
#对象 新增一个key：value 发现页面没有变化（如果是已有的key 想进行修改可以直接改）
方式一：
methods:{
handleClick(){
Vue.set(this.info,'hobby','篮球')
}
},
#固定写法 Vue.set(this.info，'key','value')
方式二：
methods:{
handleClick(){
this.info['age']='18'
this.info['hobby'] = '555'
}
},
#上面修改一个已有key的对象 下面添加一个新的对象会自动传入页面会变
| input事件 |
触发条件 |
| click |
当单击的时候 触发的事件 |
| input |
当输入框进行输入的时候 触发的事件 |
| change |
当元素的值发生改变时 触发的事件 |
| blur |
当输入框失去焦点的时候 触发的事件 |
| focus |
当获得焦点 触发事件 |
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="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" :value="info">
<h1>focus事件</h1>
<input type="text" @focus="handleFocus" >
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
info:"123",
},
methods:{
handleClick(){
alert(点了)
},
handleBlur(){
console.log('失去焦点 ')
},
handleInput(){
console.log('输入了')
},
handleChange(){
console.log('改变了')
},
handleFocus(){
console.log('获得焦点')
},
}
})
</script>
</html>
v-model双向数据绑定
input 可以输入值 输入后 就被js变量拿到 如果使用 :values = '变量' 这种形式 页面中输入框变化 变量不会变
<input type="text" :value="age">----{{age}}
使用 v-model = '变量'这种形式 做双向数据绑定
<input type="text" v-model="name">----{{name}}
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app" >
<h1>单向数据绑定</h1>
<input type="text" :value="age">----{{age}}
<h1>双向数据绑定</h1>
<input type="text" v-model="name">----{{name}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name:'joyce',age:18
},
methods:{
},
})
</script>
</html>
过滤案例
补充：
1.数组的过滤方法
var newDataList = dataList.filter(function (item) {
return false //turn 标识保留 false表示值不要
})
2. 字符串的indexOf方法 判断子字符串是否在当前字符串中 返回的是索引 如果不在 返回-1
var s = 'joyce'
var s1 = 'j'
var i =s1.indexOf(s)
console.log(i)
3.es 6 箭头函数 函数中套函数 this指向有问题 有了箭头函数 箭头函数没有自己的this 用的是上一级的
var f=function () {
console.log('13')
}
4.箭头函数
//无参数 无返回值箭头函数
var f=()=>{
console.log('13')
}
//有一个参数 没有返回值的箭头函数 括号可以去掉
var f = index=>{
console.log('13')
}
//有两个参数 没有返回值的箭头函数 括号必须有
var f = (index,item)=>{
console.log('123')
}
//有一个参数一个返回值
var f = function (index) {
return index + '123'
}
//简化：
var f = index=>index + '123'
var res = f('456')
console.log(res)l
事件修饰符
| 事物修饰符 |
释义 |
| .stop |
只处理自己的事件 防止冒泡事件 写在子控件 |
| .self |
只处理自己的事件 防止冒泡事件 写在父控件 |
| .prevent |
阻止a链接的跳转 |
| .once |
事件只会触发一次（适用于抽奖） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>事件修饰符
<ul @click="handleUL">
<li @click.stop="handLI">1</li>
<li>2</li>
</ul>
<h1>阻止a跳转</h1>
<a href="http://www.baidu.com" @click.prevent="handleA">点我</a>
</h1>
<button @click.once="handleClick">抽奖</button>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
handLI(){
alert('li123')
},
handleUL(){
alert('ul123')
},
handleA(){
alert('123')
location.href='http://www.cnblogs.com'
},
handleClick(){
alert('123')
},
}
})
</script>
</html>
案件修饰符
* 按键事件：按键盘上的某个键子 就会触发函数的执行
@keyup.enter 一样
@keyup.13
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="text" @keyup.enter="handleKeyUp">----{{text}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
text: '',
},
methods: {
handleKeyUp(event) {
if (event.keyCode == 13){
console.log('132')
}
},
}
})
</script>
</html>
表单控制
input -- 变量类型
text 类型
randio 单型
checkbox 单选或多选
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>用户名：<input type="text" v-model="username"></p>
<p>密码：<input type="text" 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="排球">
</p>
<button @click="handleClick">点击</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username: '',
password: '',
gender: '',
remember:false,
hobby:[],
},
methods: {
handleClick(){
console.log(this.username,this.password,this.gender,this.remember,this.hobby)
},
}
})
</script>
</html>
