Vue指令补充!-- v-model.trim 去除文本前后的空格只保留没有前后空格的文本内容 v-model.number 将文本中可以转成number的字符串变成字符串 --head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style .box{ width: 200px; height: 200px; border: 3px solid black; font-size: 30px; margin-top: 10px; } .pink{ background-color: pink; } .big{ width: 300px; height: 300px; } /style /head body div idapp div classbox v-bind:class{pink:true,big:false} 盒子1 /div div classbox v-bind:class[pink,big] 盒子2 /div /div /bodyv-bind导航栏菜单切换head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style * { margin: 0; padding: 0; } ul { display: flex; border-bottom: 2px solid #e01222; padding: 0 10px; } li { width: 100px; height: 50px; line-height: 50px; list-style: none; text-align: center; } li a { display: block; text-decoration: none; font-weight: bold; color: #333333; } li a.active { background-color: #e01222; color: #fff; } /style /head body div idapp ul !-- click单击事件里面可以动态去获取选中的下标 -- !-- 高亮判定条件当前列表项下标等于选中列表项的下标 -- li v-for(item,index) in list :keyitem.id mouseoveractiveIndexindex a :class{active:indexactiveIndex} href{{item.name}}/a /li /ul /div /body script srcjs/vue.js/script script const v new Vue({ el:#app, data:{ activeIndex:4, list:[ {id:1,name:京东秒杀}, {id:2,name:每日特价}, {id:3,name:品类秒杀} ] } }) /scriptv-bind控制行内样式v-model作用域其他表单上!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body div idapp h3个人信息注册/h3 姓名 input typetext v-modelusername brbr 是否单身 input typecheckbox v-modelisSingle brbr !-- 前置理解 1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥 2. value: 给单选框加上 value 属性用于提交给后台的数据 结合 Vue 使用 → v-model -- 性别: input v-modelgender typeradio namesex value1男 input v-modelgender typeradio namesex value2女 brbr !-- 前置理解 1. option 需要设置 value 值提交给后台 2. select 的 value 值关联了选中的 option 的 value 值 结合 Vue 使用 → v-model -- 所在城市: select v-modelcit option valuebj北京/option option valuesh上海/option option valuecd成都/option option valuenj南京/option /select brbr 自我描述 textarea v-modeldesc/textarea button立即注册/button /div script srcjs/vue.js/script script Vue.config.devtools true; const app new Vue({ el: #app, data: { username:, isSingle: false, gender:1, city: , desc: } }) /script /body /html!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body div idapp h3礼物清单/h3 table tr td名字/td td数量/td /tr tr v-for(item,index) in list td{{item.name}}/td td{{item.num}}个/td /tr /table !-- 目标统计总和使用computed统计总数使用函数名称一定不要带() -- p礼物总数{{gettotalcount}}/p /div /body script srcjs/vue.js/script script Vue.config.devtools true; const v new Vue({ el:#app, data:{ list:[ {id:1,name:篮球,num:1}, {id:2,name:玩具,num:2}, {id:3,name:铅笔,num:5}, ] }, computed:{ gettotalcount(){ //定义计算逻辑将list中的num取出进行累加 return this.list.reduce((sum,item)sum item.num,0) } } }) /script /html简而言之methods的函数方法每次调用都会执行一次computed会使用缓存一次刷新最多执行一次body div idapp 姓input typetext v-modelfirstNamebr 名input typetext v-modellastNamebr p姓名{{fullName}}/p button clickchangeName()修改姓名/button /div script srcjs/vue.js/script script const app new Vue({ el: #app, data: { firstName: , lastName: }, methods:{ changeName(){ this.fullName 张小飞 } }, computed: { //定义计算属性 获取结果 /* fullName(){ return this.firstName this.lastName } */ fullName:{ get(){ return this.firstName this.lastName }, set(value){ this.firstName value.slice(0,1); this.lastName value.slice(1); } } } }) /script /bodyset方法会在调用时将后面的内容当作value传入!DOCTYPE html !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body div idapp 监听简单的数据input typetext v-modelusername 监听对象的属性input typetext v-modeluser.name /div /body script srcjs/vue.js/script script Vue.config.devtools true; const vue new Vue({ el:#app, data:{ username:eric, user:{name:kobe} }, watch:{ //监听简单的数据 username(newValue,oldValue){ console.log(新值:,newValue,旧值:,oldValue) }, //监听对象的属性 user.name(n1,n2){ console.log(新值:,n1,旧值:,n2) } } }) /script /html!DOCTYPE html !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body div idapp 监听简单的数据input typetext v-modelusername 监听对象的属性input typetext v-modeluser.name 深度监听input typetext v-modelemp.empname input typetext v-modelemp.address /div /body script srcjs/vue.js/script script Vue.config.devtools true; const vue new Vue({ el:#app, data:{ username:eric, user:{name:kobe}, emp:{ empname:jass,address:USA } }, computed:{ newEmp(){ return JSON.stringify(this.emp); } }, watch:{ //监听简单的数据 username(newValue,oldValue){ console.log(新值:,newValue,旧值:,oldValue) }, //监听对象的属性 user.name(n1,n2){ console.log(新值:,n1,旧值:,n2) }, //深度监听 newEmp:{ handler(nv,ov){//nv:属性值发生变化的对象 ov:原来的值对应的对象 console.log(新, JSON.stringify(nv),旧,JSON.stringify(ov)); }, deep:true, //开启深度监听 immediate:true, //开启立即监听 } } }) /script /html
Vue02
Vue指令补充!-- v-model.trim 去除文本前后的空格只保留没有前后空格的文本内容 v-model.number 将文本中可以转成number的字符串变成字符串 --head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style .box{ width: 200px; height: 200px; border: 3px solid black; font-size: 30px; margin-top: 10px; } .pink{ background-color: pink; } .big{ width: 300px; height: 300px; } /style /head body div idapp div classbox v-bind:class{pink:true,big:false} 盒子1 /div div classbox v-bind:class[pink,big] 盒子2 /div /div /bodyv-bind导航栏菜单切换head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style * { margin: 0; padding: 0; } ul { display: flex; border-bottom: 2px solid #e01222; padding: 0 10px; } li { width: 100px; height: 50px; line-height: 50px; list-style: none; text-align: center; } li a { display: block; text-decoration: none; font-weight: bold; color: #333333; } li a.active { background-color: #e01222; color: #fff; } /style /head body div idapp ul !-- click单击事件里面可以动态去获取选中的下标 -- !-- 高亮判定条件当前列表项下标等于选中列表项的下标 -- li v-for(item,index) in list :keyitem.id mouseoveractiveIndexindex a :class{active:indexactiveIndex} href{{item.name}}/a /li /ul /div /body script srcjs/vue.js/script script const v new Vue({ el:#app, data:{ activeIndex:4, list:[ {id:1,name:京东秒杀}, {id:2,name:每日特价}, {id:3,name:品类秒杀} ] } }) /scriptv-bind控制行内样式v-model作用域其他表单上!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body div idapp h3个人信息注册/h3 姓名 input typetext v-modelusername brbr 是否单身 input typecheckbox v-modelisSingle brbr !-- 前置理解 1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥 2. value: 给单选框加上 value 属性用于提交给后台的数据 结合 Vue 使用 → v-model -- 性别: input v-modelgender typeradio namesex value1男 input v-modelgender typeradio namesex value2女 brbr !-- 前置理解 1. option 需要设置 value 值提交给后台 2. select 的 value 值关联了选中的 option 的 value 值 结合 Vue 使用 → v-model -- 所在城市: select v-modelcit option valuebj北京/option option valuesh上海/option option valuecd成都/option option valuenj南京/option /select brbr 自我描述 textarea v-modeldesc/textarea button立即注册/button /div script srcjs/vue.js/script script Vue.config.devtools true; const app new Vue({ el: #app, data: { username:, isSingle: false, gender:1, city: , desc: } }) /script /body /html!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body div idapp h3礼物清单/h3 table tr td名字/td td数量/td /tr tr v-for(item,index) in list td{{item.name}}/td td{{item.num}}个/td /tr /table !-- 目标统计总和使用computed统计总数使用函数名称一定不要带() -- p礼物总数{{gettotalcount}}/p /div /body script srcjs/vue.js/script script Vue.config.devtools true; const v new Vue({ el:#app, data:{ list:[ {id:1,name:篮球,num:1}, {id:2,name:玩具,num:2}, {id:3,name:铅笔,num:5}, ] }, computed:{ gettotalcount(){ //定义计算逻辑将list中的num取出进行累加 return this.list.reduce((sum,item)sum item.num,0) } } }) /script /html简而言之methods的函数方法每次调用都会执行一次computed会使用缓存一次刷新最多执行一次body div idapp 姓input typetext v-modelfirstNamebr 名input typetext v-modellastNamebr p姓名{{fullName}}/p button clickchangeName()修改姓名/button /div script srcjs/vue.js/script script const app new Vue({ el: #app, data: { firstName: , lastName: }, methods:{ changeName(){ this.fullName 张小飞 } }, computed: { //定义计算属性 获取结果 /* fullName(){ return this.firstName this.lastName } */ fullName:{ get(){ return this.firstName this.lastName }, set(value){ this.firstName value.slice(0,1); this.lastName value.slice(1); } } } }) /script /bodyset方法会在调用时将后面的内容当作value传入!DOCTYPE html !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body div idapp 监听简单的数据input typetext v-modelusername 监听对象的属性input typetext v-modeluser.name /div /body script srcjs/vue.js/script script Vue.config.devtools true; const vue new Vue({ el:#app, data:{ username:eric, user:{name:kobe} }, watch:{ //监听简单的数据 username(newValue,oldValue){ console.log(新值:,newValue,旧值:,oldValue) }, //监听对象的属性 user.name(n1,n2){ console.log(新值:,n1,旧值:,n2) } } }) /script /html!DOCTYPE html !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body div idapp 监听简单的数据input typetext v-modelusername 监听对象的属性input typetext v-modeluser.name 深度监听input typetext v-modelemp.empname input typetext v-modelemp.address /div /body script srcjs/vue.js/script script Vue.config.devtools true; const vue new Vue({ el:#app, data:{ username:eric, user:{name:kobe}, emp:{ empname:jass,address:USA } }, computed:{ newEmp(){ return JSON.stringify(this.emp); } }, watch:{ //监听简单的数据 username(newValue,oldValue){ console.log(新值:,newValue,旧值:,oldValue) }, //监听对象的属性 user.name(n1,n2){ console.log(新值:,n1,旧值:,n2) }, //深度监听 newEmp:{ handler(nv,ov){//nv:属性值发生变化的对象 ov:原来的值对应的对象 console.log(新, JSON.stringify(nv),旧,JSON.stringify(ov)); }, deep:true, //开启深度监听 immediate:true, //开启立即监听 } } }) /script /html
