给网站网站做代理,广州住建局官网,有什么网站可以帮人做模具吗,玉屏网络推广公司v-model 应用于其他表单元素 常见的表单元素都可以用v-model绑定关联 → 快速获取或设置表单元素的值 它会根据控件类型自动选取正确的方法来更新元素 !DOCTYPE html
html langen
headmeta charsetUTF-8meta name…v-model 应用于其他表单元素 常见的表单元素都可以用v-model绑定关联 → 快速获取或设置表单元素的值 它会根据控件类型自动选取正确的方法来更新元素
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title学习网/title
/head
bodydiv idapph3山外青山人外人/h3姓名input typetext v-modelusernamebrbr是否单身input typecheckbox v-modelisSinglebrbr性别!-- 同一个组内的 Radio 只能选择其中的一个选择一个选项会取消其他选项的选择状态 --!-- 使用name分组 --!-- 加上value值用于提交给后台的数据 --input v-modelgender typeradio namegender value1男input v-modelgender typeradio namegender value2女brbr所在城市!-- option是需要设置value值提交给后台的 --!-- select的value值,关联了选中的option的value值 --select v-modelcityIdoption value101北京/optionoption value102上海/optionoption value103成都/optionoption value104南京/option/selectbrbr自我描述textarea v-modeldesc/textareabrbrbutton立即注册/button
/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el:#app,data:{username:,isSingle:false,gender: 2 ,cityId:101,desc:}})/script
/body
/html效果如图所示
计算属性 概念基于现有的数据计算出来的新属性。依赖的数据变化自动重新计算。 语法 声明在computed配置项中一个计算属性对应一个函数使用起来和普通属性一样使用 {{计算属性名}} 注意使用属性的时候不加括号属性并非函数 计算属性 → 可以将一段求值的代码进行封装
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title计算属性/title
/head
bodydiv idapph3小黑的礼物清单/h3tabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{item.name}}/tdtd{{item.num}}/td/tr /tablep礼物总数: {{totalCount}} 个/p
/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el:#app,data:{list : [{id: 1, name:篮球, num: 1 },{id: 2, name:玩具, num: 2 },{id: 3, name:铅笔, num: 3 },]},computed:{totalCount(){// 基于现有的数据,编写求值逻辑// 计算属性函数内部,可以直接通过this访问到app实例// console.log(this.list)// 使用reduce 对this.list数组里面的num进行求和let total this.list.reduce((sum, item) sum item.num, 0)return total}}})/script
/body
/html丢在methods与丢在computed的区别在于 计算属性更加侧重于对数据的处理 作用封装了一段对于数据的处理求得一个结果 语法
写在computed配置项中作为属性直接使用 → this.计算属性 {{计算属性}}
缓存特性计算属性会对计算出来的结果缓存再次使用直接读取缓存依赖项变化了会自动重新计算→并再次缓存
methods方法更加侧重于给实例提供一个可调用的方法 作用给实例提供一个方法调用以处理业务逻辑 语法 4. 写在methods配置项中 5. 作为方法需要调用 → this.方法名(){{方法名()}} 事件名方法名
computed默认的写法中只配置获取
computed{计算属性名(){计算逻辑return结果}}如果想“修改” → 需要写计算属性的完整写法
computed{计算属性名{get(){计算逻辑return结果}set(修改的值){计算逻辑}}
}综合案例成绩案例 需求 渲染功能 用到v-if v-else v-for v-bind:class删除功能 用到点击传参 filter过滤覆盖原数组 .prevent阻止默认行为添加功能 v-model v-model修饰符(.trim .number) unshift修改数组更新视图统计总分、求平均分 计算属性 reduce求和 watch侦听器监视器 作用监视数据变化执行一些业务逻辑或异步逻辑 语法 简单写法 → 简单类型数据直接监视完整写法 → 添加额外配置项 防抖延迟执行 → 干啥先等一等延迟一会一段时间内没有再次触发才执行 async用于申明一个function是异步的 简单写法示例
data: {
words:苹果}
},
watch: {
// 该方法会在数据变化时触发执行
数据属性名(newValue, oldValue){
一些业务逻辑 或 异步操作},
对象.属性名(newValue, oldValue){
一些业务逻辑 或 异步操作}
}
