站长工具关键词查询,商丘网站制作电话,柳市网页设计,校园网站建设 德育模板语法
1. disabled指令#xff0c;可以用于禁用按钮
button :disabledisButtonDisabledButton/button
//:disabled是一个指令#xff0c;用于根据isButtonDisabled的值来动态控制按钮的禁用状态。
使用场景#xff1a;
1.防止用户重复点击…模板语法
1. disabled指令可以用于禁用按钮
button :disabledisButtonDisabledButton/button
//:disabled是一个指令用于根据isButtonDisabled的值来动态控制按钮的禁用状态。
使用场景
1.防止用户重复点击按钮
2.表单验证未通过时不能点击提交按钮
3.正在进行异步操作时不能点击
4.操作权限控制
5.数据加载中
凡是想禁用按钮时就可以使用disabled指令
2. 动态绑定多个值,可以用于动态修改样式
div v-bindobjectOfAttrs/divconst objectOfAttrs {id: container,class: wrapper,style: background-color:green
}// 直接修改objectOfAttrs对象中的style属性值
this.objectOfAttrs.style background-color:blue;
//此时修改objectOfAttrs里style的值就可以直接使背景从绿色修改为蓝色使用场景
1.根据不同条件切换样式
2.响应式布局适配
3.组件复用与定制
3. 动态参数
//在指令参数上
a v-bind:[attributeName]url ... /a
!-- 简写 --
a :[attributeName]url ... /a//动态的事件名称上
a v-on:[eventName]doSomething ... /a
!-- 简写 --
a [eventName]doSomething ... /a
响应式基础
1. ref支持任何类型的值reactive只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)
2. DOM更新不是同步的vue会在“next tick”更新周期中缓冲所有状态的修改以确保不管进行多少次修改都只会被更新一次
3. 如果ref值的类型是复杂类型在更新里面的值时如果只更新里面的某一个值时是不会触发更新的需要让整个值更新才会触发更新。
const shallowArray shallowRef([/* 巨大的列表里面包含深层的对象 */
])// 这不会触发更新...
shallowArray.value.push(newObject)
// 这才会触发更新
shallowArray.value [...shallowArray.value, newObject]// 这不会触发更新...
shallowArray.value[0].foo 1
// 这才会触发更新
shallowArray.value [{...shallowArray.value[0],foo: 1},...shallowArray.value.slice(1)
]
但是如果是reactive就可以直接更新。
button clickstate.count{{ state.count }}
/buttonimport { reactive } from vueconst state reactive({ count: 0 })
