今日内容概要
js的几种循环方式
1.v-for可以循环的变量
"""
在获取循环的时候如果想要获得索引值(键)
v-for='(v,k) in info'
切记 v和k的位置 以及必须要用括号括起来
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div class="app">
<h3>循环数组</h3>
<span v-for="item in l">{{item}}</span>
<h3>循环带上索引</h3>
<span v-for="(item,index) in l">{{index+1}}个数据是:{{item}}</span>
<h3>循环对象 默认是循环值</h3>
<div v-for="(item,key) in info">{{key}}:{{item}}
<!--循环字符串的时候中间的空格也会被循环 只是一些空标签不展示-->
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'.app',
data:{
l:[1,2,3],
info:{'name':'xiaochen','age':19},
s:'你好'
}
})
</script>
</html>
2.js的循环方式
#1. js的循环 基于索引的循环
var a = [4 ,5 ,6 ,7 ]
for (i=0 ;i<a.length ;i++){
console .log (a[i])
}
#2. js的in 循环拿到的索引(拿的是索引!!!!!)
var a = [4 ,5 ,6 ,7 ]
for (i in a){
console .log (a[i])
}
#3. es 6 的语法 of 循环
var a = [4 ,5 ,6 ,7 ]
for (item of a){
console .log (item)
}
#4. 数组的内置方法 forEach可以循环
var a = [4 ,5 ,6 ,7 ]
a.forEach (function (item ){
console .log (item)
})
"" "item只是变量名 可自定义" ""
#5. jq的循环 循环数组 对象(记得导入)
var a = [4 ,5 ,6 ,7 ]
$.each (a,function (index,item ){
console .log (index)
console .log (item)
})
key值的解释
eg:
<div v-for ='a in 8' :key='a' >{{a}}</dic>
数组 对象的检测和更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div class="app">
<h2>循环对象</h2>
<div v-for="(value,key) in info">
<h3>key:{{key}}</h3>
<h3>value:{{value}}</h3>
<hr></div>
<div v-for="(info,index) in l">
<h3>索引:{{index}}</h3>
<h3>数值:{{info}}</h3>
</div>
<button @click="aaa">点我添加数据</button>
</div>
<script>
var vm = new Vue({
el:'.app',
data:{
info:{'name':'小陈','age':'18'}
,l:[1,2]
},
methods:{
aaa(){
// 该条数据会被添加 但是页面不会发生变化
// this.info['hobby'] = '足球'
// 该条数据可以直接修改页面与数据值
// this.info['name'] = '阿祖'
// 如果想要新增一条数据就用这个(页面会改变)
// Vue.set(this.info,'hobby','足球')
// 数组新增中间就是的参数为索引
Vue.set(this.l,'1',100)
}
}
})
</script>
</body>
</html>
inout事件
click
input 当输入框进行输入的时候 触发的事件
change 当元素的值发生改变的时候 触发的事件
blur 当输入框失去焦点的时候 触发的事件
focus 当获得焦点 触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<h3>点击事件</h3>
<input type="text" @click="handleClick">
<h3>失去焦点事件</h3>
<input type="text" @blur="handleBlur">
<h3>input事件 只要输入 就会触发</h3>
<input type="text" @input="handleInput">
<h3>change事件</h3>
<input type="text" @change="handleChange">
<h3>focus事件</h3>
<input type="text" @focus="handleFocus">
</div>
</body>
<script>
var vm = new Vue({
el:'.app',
data:{},
methods:{
handleClick() {
alert('点了')
},
handleBlur(){
alert('失去焦点')
},
handleInput(){
alert('输入了东西')
},
handleChange(){
alert('改变了东西')
},
handleFocus(){
alert('获得焦点')
}
}
})
</script>
</html>
v-model双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<h3>单向数据绑定</h3>
<input type="text" :value="name"> ----> {{name}}
<h3>双向数据绑定</h3>
<input type="text" v-model="age"> ----> {{age}}
<!--在这输入的值可修改data中的值-->
</div>
</body>
<script>
var vm = new Vue({
el:'.app',
data:{name:'laz',age:10}
})
</script>
</html>
过滤案例
在使用过滤前需要会的小知识点
var dataList=['a' ,'ab' ,'bbc' ,'bso' ,'cow' ,'tt' ]
var newDatalist = dataList.filter (function (item){
return true // 返回true则保留数据 反则舍弃
})
console.log(newDatalist)
var s = 'cyf is home'
var s1 = 'cyf'
var i = s.indexOf(s1)
console.log(i) // >>> 结果为0
var a = s.indexOf('is' )
console.log(a) // >>>结果为4
var b = s.indexOf('t' )
console.log(b) // >>> 结果为-1
//1. 无参数
// var f = () => {
// console.log('小陈' )
// }
// f()
// 2. 有一个参数 没有返回值的箭头函数 括号可以去掉
// var f = item=> {
// console.log(item)
// }
// f('小陈' )
// 3. 有多个参数 没有返回值的箭头函数
// var f = (item,key) => {
// console.log(item+key)
// }
// f(1 ,2 )
// 4. 有一个参数 一个返回值
// var f =item => {
// return item
// }
// var res = f('xiaochen' )
// console.log(res)
// 超级简写版
// var f = item => item+'nb'
// var res = f('xiaochen' )
// console.log(res)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.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() {
this.newDataList = this.dataList.filter(
item => item.indexOf(this.myText) >= 0
)
}}
})
</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(回车触发 )
<!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">
<!-- <input type="text" v-model="text" @keyup="handleKeyUp">-–>{{text}}-->
<!-- <input type="text" v-model="text" @keyup.13="handleKeyUp2">-–>{{text}}-->
<input type="text" v-model="text" @keyup.enter="handleKeyUp2(1,$event)">--->{{text}}
</div>
</div>
</body>
<script>
var vm = 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>
表单控制
text 类型
radio：单选
checkbox：单选和多选
<!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">
<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="排球">
</p>
<button @click="handleClick">登录</button>
</div>
</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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）