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>