js循环、v-model、事件处理、表单控制
一、js循环方式
1、
# 1 循环方式一：js 循环---》for() 基于索引的循环
# let es6 语法，用于定义变量 。定义常量：const
# var 以后少用
<script>
for (let i = 0; i < 10; i++) {
console.log(i)
}
let j = 0
for (; j < 5 ; ) {
console.log(j)
j++
}
# 2 js循环方式二：in 循环 基于迭代的循环，依赖于索引取值 python全是基于迭代的循环
let good_list = [3,4,5,6]
for (const item in good_list) {
console.log(item, good_list[item])
}
# 3 js 循环方式三：of循环 跟python中的in是一样的
let good_list = [2,3,4,5]
for (const item of good_list) {
console.log(item)
}
# 4 数组的方法，循环
let good_list = [3, 4, 5, 6]
good_list.forEach(function (value, index) {
console.log(value, index)
})
# 5 jq的循环(引入jq)
let good_list = [3, 4, 5, 6]
let userinfo = {'name': 'lqz', 'age': 19}
$.each(userinfo, function (index, value) {
console.log(index)
console.log(value)
})
</script>
2、vue中使用v-for的时候，在标签上，会看到有 key 属性
- :key="item" 用的属性指令
-key对应的值必须是唯一的
在循环的标签上，加key值的好处是，加速虚拟dom的替换
-区别只在循环的变量变化时，效率高低
-但是一定要注意：key必须唯一
<div class="block">
<span class="demonstration">默认 Hover 指示器触发</span>
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
3、
# 以后可能会遇到，数据变了，页面没变的情况
-不能直接更改，借助于vue提供的方法，vue.Set 更改
-以后只要发现数据变了，页面没变，就先用Vue.set试一下
Vue.set(对象, key, value) // 改对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<button class="btn btn-danger" @click="handleShow">点我显示购物车</button>
<button class="btn btn-danger" @click="handleDelete">删除最后一条</button>
<button class="btn btn-danger" @click="handlerev">反转</button>
<button class="btn btn-danger" @click="handleFirst">变更第一条</button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>id号</th>
<th>商品名字</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">{{ item.id }}</th>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>{{ item.count }}</td>
</tr>
</tbody>
</table>
{{ userinfo.name }}---{{ userinfo.age }}
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list: [],
userinfo: {name: 'lqz', age: 18}
},
methods: {
handleShow() {
this.good_list = [
{id: 1, name: '钢笔', price: 9.9, count: 4},
{id: 2, name: '足球', price: 99, count: 4},
{id: 3, name: '篮球', price: 44, count: 32},
{id: 4, name: '电脑', price: 1299, count: 48},
{id: 5, name: '鼠标', price: 23, count: 4},
{id: 6, name: '脸盆', price: 8, count: 4},
]
},
handleDelete() {
this.good_list.pop()
},
handlerev() {
this.good_list.reverse()
console.log(this.good_list)
},
handleFirst() {
// {this.good_list[0] = {id: 555, name: '小鼠标', price: 223, count: 4}}
Vue.set(this.good_list, 0, {id: 555, name: '小鼠标', price: 223, count: 4}) // 改数组
//Vue.set(对象,key,value) // 改对象
}
}
})
</script>
</html>
二、v-model的使用
1、:value="username" 对input标签做绑定，它只能单项的绑定，js变量变，页面会变，页面变，js变量不会变
使用v-model实现双向绑定：页面改变，js变量页跟着改变
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>v-model的使用</h1>
<p>用户名：<input type="text" v-model="username"></p>
<p>密码：<input type="password" v-model="password"></p>
<button class="btn btn-danger" @click="handleSubmit">登录</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let mv = new Vue({
el: "#app",
data: {
//username: 'zjz',
username: '',
password: '',
},
methods: {
handleSubmit() {
console.log(this.username, this.password)
}
}
})
</script>
v-model补充
# v-model 之 lazy、number、trim
lazy：等待input框的数据绑定时区焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<div class="text-center"><h1>v-model修饰符</h1>
<p><input type="text" v-model.lazy="value1">--->{{ value1 }}</p>
<p><input type="text" v-model.number="value2">--->{{ value2 }}</p>
<p><input type="text" v-model.trim="value3">--->{{ value3 }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let mv = new Vue({
el: "#app",
data: {
value1: '',
value2: '',
value3: '',
},
methods: {
handleSubmit() {
console.log(this.username, this.password)
}
}
})
</script>
</html>
三、事件处理
1、
- input 当输入框进行输入的时候触发的事件 @input="handleInput"
- change 当元素的值发生改变时触发的事件，光标移走才检测 @change="handleChange"
- blur 当输入框失去焦点的时候触发的事件 @blur="handleBlur"
- focus 光标到input框上，触发 @focus="handleFocus"
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div>
<h1>input 标签事件</h1>
<h2>input事件</h2>
<input type="text" v-model="value1" @input="handleInput"> ---> {{ value1 }}
<h2>change事件</h2>
<input type="text" v-model="value2" @change="handleChange"> ---> {{ value2 }}
<h2>blur 事件</h2>
<input type="text" v-model="value3" @blur="handleBlur"> ---> {{ value3 }}
<h2>focus 事件</h2>
<input type="text" v-model="value4" @focus="handleFocus">--->{{ value4 }}
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
value1: '',
value2: '',
value3: '',
value4: '',
},
methods: {
handleInput() {
console.log('我动了')
},
handleChange() {
console.log('我变化了')
},
handleBlur() {
console.log('我失去焦点了')
},
handleFocus() {
console.log('我获得焦点了')
}
}
})
</script>
</html>
2、
1 一定要用 一个变量来接收过滤后的值
2 this指向问题:如果vue的methods中再写函数，this指向就发生变化---->
解决方案一： 再外部定义一个变量，内部使用该变量
解决方案二： 箭头函数解决--》es6
3 删除输入的字符，回不去了--> 定义一个新变量，接收过滤后的数据集
方案一写法（外部定义变量）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
<div class="text-center">
<h1>过滤案例</h1>
<input type="text" v-model="myText" @input="handleInput">
<hr>
<p v-for="item in newdataList">{{ item }} </p>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc'],
newdataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc'],
},
methods: {
handleInput() {
console.log('输入了')
console.log('外面的this', this.myText)
let _this = this
this.newdataList = this.dataList.filter(function (item) {
console.log('里面的this', _this)
if (item.indexOf(_this.myText) >= 0) {
return true
} else {
return false
}
})
}
}
})
</script>
</html>
方案二写法（箭头函数）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
<div class="text-center">
<h1>过滤案例</h1>
<input type="text" v-model="myText" @input="handleInput">
<hr>
<p v-for="item in newdataList">{{ item }} </p>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc'],
newdataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc'],
},
methods: {
handleInput() {
this.newdataList = this.dataList.filter(item => item.indexOf(this.myText) >= 0)
}
}
})
</script>
</html>
补充：过滤细节补充
// 补充1 ：数组的过滤
let dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc']
// 数组的filter方法---》需要传一个匿名函数，匿名函数接收一个参数，它会循环该数组，一次次的调用这个匿名函数，并且传入循环到的值
// 这个匿名函数返回true，表示这个值保留，返回false，表示这个值不保留
dataList = dataList.filter(function (item) {
return true
})
console.log(dataList)
// 补充二：现在要判断，用户输入的myText，在不在循环到的数组的某个值中，只要在，就返回true，只要不在就返回false
// 补充三：如何判断一个字符串是否在另一个字符串中 如果在就大于等于0，不在就是 -1
let name = 'lqz'
let s = 'ccy lqz zjz is handsome'
let res = s.indexOf(name)
console.log(res)
补充：箭头函数的用法
箭头函数：es6的语法，简化匿名函数的编写，它没有自己的this
- 无参数，无返回值 var f= ()=>{}
- 一个参数，无返回值 var f= item=>{}
- 一个参数，直接有返回值 var f= item=>item+'xxx'
- 多个参数，直接有返回值 var f= (a,b)=>a+b
<script>
//1 之前写法
var f = function () {
console.log('f执行了')
}
f()
//2 变成箭头函数，参数和函数体之间加了箭头
var f1 = () => {
console.log('f1执行了')
}
f1()
// 3 带参数箭头函数,带一个参数，可以简写
var f2 = (a) => {
console.log(a)
}
f2('lqz')
var f3 = a => {
console.log(a)
}
f3('lqz')
// 4 有多个参数,不能简写
var f4 = (a, b) => {
console.log(a, b)
}
f4('lqz', 19)
// 5 有一个返回值
var f5 = (a, b) => {
return a + b
}
console.log(f5(1, 19))
// 6 可以省略
var f6 = (a, b) => a + b
console.log(f6(1, 19))
// 7 一个参数，一个返回值
var f7 = name => name + '_NB'
console.log(f7('lqz'))
</script>
3、
# 事件修饰符 释义 .stop 只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡） .self 只处理自己的事件，子控件冒泡的事件不处理 .prevent 阻止a链接的跳转 .once 事件只会触发一次（适用于抽奖页面）
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>事件修饰符之 stop和self</h1>
<h2>子标签的事件，冒泡到了父标签上---》阻止 stop 放在子标签上</h2>
<ul @click="handleClickUl">
<li @click.stop="handleClickLi(1)">第一个</li>
<li @click.stop="handleClickLi(2)">第二个</li>
<li @click="handleClickLi(3)">第三个</li>
</ul>
<h2>子标签的事件，冒泡到了父标签上---》阻止 self 放在父标签上</h2>
<ul @click.self="handleClickUl">
<li @click="handleClickLi(1)">第一个</li>
<li @click="handleClickLi(2)">第二个</li>
<li @click="handleClickLi(3)">第三个</li>
</ul>
</div>
<h2>阻止a的跳转</h2>
<a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>
<h3>once 只能点击一次</h3>
<button class="btn btn-success" @click.once="handleSckill">秒杀</button>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
handleClickUl() {
console.log('UL被点了')
},
handleClickLi(i) {
console.log(i, 'li被点了')
},
handleA() {
console.log('a被点了')
console.log('有一堆判断，判断通过，跳转')
alert('您没有权限')
// location.href = 'http://www.baidu.com'
},
handleSckill() {
console.log('开始描述，正在排队')
// 发送请求，跟后端交互
// 这个过程之，不能再点了
if (Math.floor(Math.random() * 2) > 0) {
alert('秒杀成功')
} else {
alert('很遗憾，没秒到')
}
}
}
})
</script>
</html>
四、表单控制
1、radio 单选框 和 checkbox 复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>checkbox 单选</h1>
<form>
<p>用户名：<input type="text" v-model="username"></p>
<p>密码：<input type="password" v-model="password"></p>
<p>记住密码：<input type="checkbox" v-model="isRem"></p>
<span class="btn btn-success" @click="handleLogin">登录</span>
</form>
<hr>
<h1>radio单选-->选中哪个，就显示对应的value的值</h1>
<form>
<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">
保密： <input type="radio" v-model="gender" value="0">
</p>
<p>记住密码：<input type="checkbox" v-model="isRem"></p>
<span class="btn btn-success" @click="handleLogin">登录</span>
</form>
<h1>checkbox多选,使用数组，会把选中的value的值都放到数组中</h1>
<form>
<p>用户名：<input type="text" v-model="username"></p>
<p>密码：<input type="password" v-model="password"></p>
<p>性别：
<br>
男： <input type="radio" v-model="gender" value="1">
<br>
女： <input type="radio" v-model="gender" value="2">
<br>
保密： <input type="radio" v-model="gender" value="0">
</p>
<p>爱好
篮球：<input type="checkbox" value="篮球" v-model="hobby">
足球：<input type="checkbox" value="足球" v-model="hobby">
乒乓球：<input type="checkbox" value="乒乓球" v-model="hobby">
橄榄球：<input type="checkbox" value="橄榄球" v-model="hobby">
</p>
<p>记住密码：<input type="checkbox" v-model="isRem"></p>
{{ hobby }}
<span class="btn btn-success" @click="handleLogin">登录</span>
</form>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username: '',
password: '',
// checkbox 单选，要么是true，要么是false
isRem: '',
gender: '',
hobby: []
},
methods: {
handleLogin() {
console.log(this.username, this.password, this.isRem, this.gender, this.hobby)
}
}
})
</script>
</html>
五、购物车案例
1、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center"><h1>购物车案例</h1>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>id号</th>
<th>商品名字</th>
<th>商品价格</th>
<th>商品数量</th>
<th>全选/全不选<input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">{{ item.id }}</th>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>{{ item.count }}</td>
<td><input type="checkbox" v-model="checkGroup" :value="item" @change="handleOne"></td>
</tr>
</tbody>
</table>
<hr>
选中的商品有：{{ checkGroup }}
<br>
总价格是：{{ getPrice() }}
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list: [
{id: 1, name: '金ping梅', price: 99, count: 2},
{id: 2, name: '西柚记', price: 59, count: 1},
{id: 3, name: '水壶转', price: 89, count: 5},
],
checkGroup: [],
checkAll: false
},
methods: {
getPrice() {
// 选中了哪些商品，计算价格
total = 0
for (item of this.checkGroup) {
// console.log(item)
total += item.price * item.count
}
return total
},
handleCheckAll() {
if (this.checkAll) {
this.checkGroup = this.good_list
} else {
this.checkGroup = []
}
},
handleOne() {
if (this.checkGroup.length == this.good_list.length) {
this.checkAll = true
} else {
this.checkAll = false
}
}
}
})
</script>
</html>
注：
<td><input type="checkbox" v-model="checkGroup" :value="item" @change="handleOne"></td>
v-model="checkGroup"：它在复选框输入元素与Vue实例（vm）中的checkGroup属性之间建立了双向数据绑定
:value="item"： 是属性指令，item根据循环拿值，并非写死。另外 value在复选框中的作用，如果 value 属性存在，浏览器会将指定的值发送到服务器和默认显示
2、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center"><h1>购物车案例</h1>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>id号</th>
<th>商品名字</th>
<th>商品价格</th>
<th>商品数量</th>
<th>全选/全不选<input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">{{ item.id }}</th>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td><span class="btn" @click="item.count++">+</span> {{ item.count }} <span class="btn"
@click="handleJian(item)">-</span>
</td>
<td><input type="checkbox" v-model="checkGroup" :value="item" @change="handleOne"></td>
</tr>
</tbody>
</table>
<hr>
选中的商品有：{{ checkGroup }}
<br>
总价格是：{{ getPrice()}}
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list: [
{id: 1, name: '金ping梅', price: 99, count: 2},
{id: 2, name: '西柚记', price: 59, count: 1},
{id: 3, name: '水壶转', price: 89, count: 5},
],
checkGroup: [],
checkAll: false
},
methods: {
getPrice() {
// 选中了哪些商品，计算价格
total = 0
for (item of this.checkGroup) {
// console.log(item)
total += item.price * item.count
}
return total
},
handleCheckAll() {
if (this.checkAll) {
this.checkGroup = this.good_list
} else {
this.checkGroup = []
}
},
handleOne() {
if (this.checkGroup.length == this.good_list.length) {
this.checkAll = true
} else {
this.checkAll = false
}
},
handleJian(item) {
if (item.count > 0) {
item.count--
} else {
alert('不能再少了，受不了了')
}
}
}
})
</script>
</html>
六、美女循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button class="btn btn-primary" @click="handleClick" >点我切换美女</button>
<br>
<img v-if="url" :src="url" alt=""> <!-- 使用 v-if 控制图片显示 -->
</div>
</body>
<script>
let mv = new Vue({
el: "#app",
data: {
url: '',
new_url_list:['10023.jpg','10026.jpg','10027.jpg','10028.jpg','10033.jpg'],
index: 0,
},
methods:{
handleClick: function(){
this.url = this.new_url_list[this.index];
this.index = (this.index + 1) % this.new_url_list.length;
}
},
})
</script>
</html>
浙公网安备 33010602011771号