优秀企业网站欣赏,wordpress显示文章列表的主题,品牌vi设计包含哪些,新能源汽车价格及图片目录 1 指令修饰符1.1 什么是指令修饰符#xff1f;1.2 按键修饰符1.3 v-model修饰符1.4 事件修饰符 2 v-bind对样式控制的增强-操作class2.1 语法#xff1a;2.2 对象语法2.3 数组语法2.4 代码练习 3 京东秒杀-tab栏切换导航高亮3.1 需求#xff1a;3.2 准备代码:3.3 思路1.2 按键修饰符1.3 v-model修饰符1.4 事件修饰符 2 v-bind对样式控制的增强-操作class2.1 语法2.2 对象语法2.3 数组语法2.4 代码练习 3 京东秒杀-tab栏切换导航高亮3.1 需求3.2 准备代码:3.3 思路 4 v-bind对有样式控制的增强-操作style4.1 语法4.2 代码练习4.3 进度条案例 5 v-model在其他表单元素的使用5.1 讲解内容5.2 代码准备 1 指令修饰符 1.1 什么是指令修饰符
所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 — 简化代码
1.2 按键修饰符
keyup.enter —当点击enter键的时候才触发
代码演示 div idapph3keyup.enter → 监听键盘回车事件/h3input v-modelusername typetext/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: },methods: {}})/script1.3 v-model修饰符
v-model.trim —去除首位空格v-model.number —转数字
1.4 事件修饰符
事件名.stop — 阻止冒泡事件名.prevent —阻止默认行为事件名.stop.prevent —可以连用 即阻止事件冒泡也阻止默认行为 style.father {width: 200px;height: 200px;background-color: pink;margin-top: 20px;}.son {width: 100px;height: 100px;background-color: skyblue;}/stylediv idapph3v-model修饰符 .trim .number/h3姓名input v-modelusername typetextbr年纪input v-modelage typetextbrh3事件名.stop → 阻止冒泡/h3div clickfatherFn classfatherdiv clicksonFn classson儿子/div/divh3事件名.prevent → 阻止默认行为/h3a click hrefhttp://www.baidu.com阻止默认行为/a/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,age: ,},methods: {fatherFn () {alert(老父亲被点击了)},sonFn (e) {// e.stopPropagation()alert(儿子被点击了)}}})/script2 v-bind对样式控制的增强-操作class
为了方便开发者进行样式控制 Vue 扩展了 v-bind 的语法可以针对 class 类名 和 style 行内样式 进行控制 。
2.1 语法
div :class 对象/数组这是一个div/div2.2 对象语法
当class动态绑定的是对象时键就是类名值就是布尔值如果值是true就有这个类否则没有这个类
div classbox :class{ 类名1: 布尔值, 类名2: 布尔值 }/div 适用场景一个类名来回切换
2.3 数组语法
当class动态绑定的是数组时 → 数组中所有的类都会添加到盒子上本质就是一个 class 列表
div classbox :class[ 类名1, 类名2, 类名3 ]/div使用场景:批量添加或删除类
2.4 代码练习 style.box {width: 200px;height: 200px;border: 3px solid #000;font-size: 30px;margin-top: 10px;}.pink {background-color: pink;}.big {width: 300px;height: 300px;}/stylediv idapp!--绑定对象--div classbox黑马程序员/div!--绑定数组--div classbox黑马程序员/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script3 京东秒杀-tab栏切换导航高亮
3.1 需求
当我们点击哪个tab页签时哪个tab页签就高亮
3.2 准备代码: 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;}/stylediv idappullia classactive href#京东秒杀/a/lilia href#每日特价/a/lilia href#品类秒杀/a/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {list: [{ id: 1, name: 京东秒杀 },{ id: 2, name: 每日特价 },{ id: 3, name: 品类秒杀 }]}})/script3.3 思路
1.基于数据动态渲染tabv-for
2.准备一个下标 记录高亮的是哪一个 tab
3.基于下标动态切换class的类名
4 v-bind对有样式控制的增强-操作style
4.1 语法
div classbox :style{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }/div4.2 代码练习
style.box {width: 200px;height: 200px;background-color: rgb(187, 150, 156);}/stylediv idappdiv classbox/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script4.3 进度条案例 style.progress {height: 25px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;}.inner {width: 50%;height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}.inner span {position: absolute;right: -20px;bottom: -25px;}/stylediv idappdiv classprogressdiv classinnerspan50%/span/div/divbutton设置25%/buttonbutton设置50%/buttonbutton设置75%/buttonbutton设置100%/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script5 v-model在其他表单元素的使用
5.1 讲解内容
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
输入框 input:text —— value
文本域 textarea —— value
复选框 input:checkbox —— checked
单选框 input:radio —— checked
下拉菜单 select —— value
...5.2 代码准备 styletextarea {display: block;width: 240px;height: 100px;margin: 10px 0;}/stylediv idapph3小黑学习网/h3姓名input typetext brbr是否单身input typecheckbox brbr!-- 前置理解1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性用于提交给后台的数据结合 Vue 使用 → v-model--性别: input typeradio男input typeradio女brbr!-- 前置理解1. option 需要设置 value 值提交给后台2. select 的 value 值关联了选中的 option 的 value 值结合 Vue 使用 → v-model--所在城市:selectoption北京/optionoption上海/optionoption成都/optionoption南京/option/selectbrbr自我描述textarea/textarea button立即注册/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script
