什么是网站ip地址,张店网站建设公司,wordpress超详细教程视频教程,做网站销售大概多少钱目录 指令修饰符
按键修饰符
事件修饰符 双向绑定指令修饰符
输入框
表单域
下拉框
单选按钮
复选框
样式绑定
分类
绑定class
绑定style
tab页切换示例 指令修饰符
作用
借助指令修饰符#xff0c;可以让指令的功能更强大
分类
按键修饰符#xff1a;用来…目录 指令修饰符
按键修饰符
事件修饰符 双向绑定指令修饰符
输入框
表单域
下拉框
单选按钮
复选框
样式绑定
分类
绑定class
绑定style
tab页切换示例 指令修饰符
作用
借助指令修饰符可以让指令的功能更强大
分类
按键修饰符用来检测用户的按键配合键盘事件使用keydown和keyup事件修饰符简化程序对于阻止冒泡、阻止默认行为的操作双向绑定指令修饰符可以让v-model的功能更强大
按键修饰符
如下.enter指定只有按了回车按钮才触发其他键盘事件不触发 template div input typetext keydown.enteronKeydown / /div /template script setup import { ref } from vue const onKeydown (event) { console.log(event.key) } /script 事件修饰符
阻止默认行为,如下会阻止页面跳转 a hrefhttps://baidu.com click.prevent百度一下/a .stop阻止冒泡同名事件不会向上级传递 div clickonDivcClick p click.stoponClick/p /div 修饰符的链式调用表明两个同时阻止 p click.stop.preventonClick/p 双向绑定指令修饰符
v-model双向绑定指令可以快速设置或获取表单控件的值比如输入框、文本域、下拉菜单、单选框、复选框。用在不同的表单控件上v-model都能正确设置或获取相应的值但内部采取的方式和关联的属性有所不同。
输入框
v-model.trim数据把输入框值的首尾空格去掉再同步给数据 input typetext v-model.trimgoods.name/ v-model.number数据尝试把输入框的值转成数字再同步给数据 input typetext v-model.numbergoods.name/ v-model.lazy数据当失焦的时候再同步给数据而不是实时同步 input typetext v-model.lazygoods.name/ 表单域
如下代码可以将表单数据textarea的输入赋值给intro变量
template
divtextarea v-modelintro cols30 rows4 placeholder请输入自我介绍/textareabr/br//div
/templatescript setupimport { ref } from vueconst intro ref()const city ref()
/script
下拉框
v-model收集下拉列表的值v-model写在select上关联的是选中的option的value 如下选中哪个选项会将其value值赋给city如果设置city默认值value则会默认选择对应选项
template
divselect v-modelcityoption value上海上海/optionoption value北京北京/optionoption value广州广州/option option value深圳深圳/option/select
/div
/templatescript setupimport { ref } from vueconst intro ref()const city ref()
/script
单选按钮
将选中的选项value值赋给sex若要默认勾选则设置sex默认值为对应value值就可以了
template
divinput typeradio valuemale v-modelsex/Maleinput typeradio valuefemale v-modelsex/Female
/div
/templatescript setupimport { ref } from vueconst sex ref()/script
复选框
只有一个复选框v-model绑定布尔值关联的是复选框的checked属性有多个复选框v-model绑定数组关联的复选框的value属性手动给复选框添加value属性
只有一个复选框的时候 template div input typecheckbox v-modelisVisible/是否同意用户协议 /div /template script setup import { ref } from vue const isVisible ref(false) /script 多个复选框的时候
使用数组接收已经勾选的选项的value值如果要使用默认勾选几个选项就把要勾选的选项的value值存在数组里 template div input typecheckbox valueLQ v-modelhobby篮球 input typecheckbox valuePingPang v-modelhobby乒乓球 input typecheckbox valueTennis v-modelhobby网球 /div /template script setup import { ref } from vue const hobby ref([]) /script 样式绑定
为了便于程序员给元素动态的设置样式Vue扩展了v-bind语法允许我们通过绑定class或style属性通过数据控制元素的样式。
分类
绑定class
静态class也就是class前面没有和动态class可以共存二者会合并
语法
三元绑定 :class条件类名1类名2 对象绑定 :class{ 类名1条件1成立条件布尔值类名2条件2成立条件布尔值……} 三元绑定示例
template
divp :classisActive?active: non_activeActive/p
/div
/templatescript setupimport { ref } from vueconst isActiveref(true)
/scriptstyle.active{color: red;}.non_active{color:blue}
/style
对象绑定示例
template
divp :class{active:isActive}Active/p
/div
/templatescript setupimport { ref } from vueconst isActiveref(true)
/scriptstyle.active{color: red;}
/style
绑定style
语法 :style{CSS属性名:表达式1CSS属性名:表达式2……} 使用示例
template
divp :style{color:colorStr}绑定style/p
/div
/templatescript setupimport { ref } from vueconst colorStr ref(red)
/script 也可以将属性对应属性值放到一个响应式样式对象里在将这个对象绑定到style
template
divp :stylestyleObj绑定style对象/p
/div
/templatescript setupimport { reactive } from vueconst styleObj reactive({color:blue,backgroundColor:yellow})
/script
tab页切换示例 templateulli v-foritem,index in tabs :keyitem.ida href# :class{active:indexactiveTabId} clickactiveTabIdindex{{item.name}}/a/li/ul
/templatescript setupimport { ref } from vueconst tabs[{id:1,name:京东秒杀},{id:2,name:每日特价},{id:3,name:品类秒杀}]const activeTabIdref(0)
/scriptstyle *{margin: 0;padding: 0;}ul{display: flex;list-style: none;border-bottom: 2px solid #e01222;padding : 0 10px;}ul li{width: 100px;height: 50px;line-height: 50px;text-align: center;}ul li a{display: block;text-decoration: none;color: #333;font-weight: bold;}ul li a.active{background: #e01222;color: #fff;}
/style
