冬夜先生
vue基础-动态样式&表单绑定&vue响应式原理
关注作者
前往小程序,Get
更优
阅读体验!
立即前往
腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
冬夜先生
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
社区首页
>
专栏
>
vue基础-动态样式&表单绑定&vue响应式原理
vue基础-动态样式&表单绑定&vue响应式原理
冬夜先生
关注
修改于 2021-10-20 10:25:53
1.6K
0
修改于 2021-10-20 10:25:53
举报
文章被收录于专栏:
csico
csico
动态样式
作用:使用声明式变量来控制class和style的值
语法: :class/:style
注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需要通过Vue编译,会出现‘一闪而过’的效果。
动态class
:class='由类名拼接而成的字符串""'字符串格式
:class='[表达式1,表达式2,...]'数组格式
注意:每个表达式都要求返回一个已经定义过的class类
:class='{"css类名1":布尔值,"css类名2":布尔值,...}'
注意:对象语法中,key名的返回值,若是变量需要加[],key名的返回是有效的类名,value必须是布尔值(小心布尔值的隐式类型转化)
image
动态style
:style='ss' ss可以是html5中style值的字符串,还可以是[{},{}]数组语法,还可以直接是{css属性:css属性值}
:style='[{},{}]'
注意:数组中的每个对象都是'css属性':css属性值 构成的对象
:style='{css属性:css属性值,...}'
image
表单绑定
表单:文本框,拾色器,多行文本框,下拉框,复选框,单选按钮组等...
从组件化的角度,凡是会发生值得的变化组件,都可以被认为是表单
注意:
1.在单/复选框时,给他们添加同一组v-model,就可以变成一组,同时需要添加:value用于双向绑定
2.一般多选框的v-model要设置一个类型为数组的声明式变量,但是我们提交给后端时,常常需要将其转化为以“;”,“#”分割的字符串,可以使用arr.join(";")方法
image
如何理解v-model这个指令
1.v-model是一种语法糖(一种比较好用的简写)
对于普通文本框来讲,v-model = v-bind:value + v-on:change
对于单选按钮组,复选框来讲,v-model =v-bind:checked + v-on:change
对于下拉框来讲,v-model = v-bind:value + v-on:change
image
2.v-model,在组件化中应用非常广泛,常用于父子组件通信
响应式
响应式?vue可以监听一个变量的变化,当变量发生变化时,vue可以做一些工作。当面试官问响应式的原理,是问什么呢?问的是“vue如何监听data选项上的变量的变化的?”
双向绑定?专指vue表单的v-model
模拟响应式实现过程
简介:1.首先创建vue实例,通过object.defineproperty设置拦截器
image
2.当使用v-text等指令操作时,会进行touch,定义一个dep收集依赖,存放与异步队列中
image
3.v-model,还可以设置值,相当于调用set方法
image
4.进行初始化,第一次渲染需要通知watcher观察者函数
image
5.定义观察者函数,当调用set修改声明式变量的值,发生变化时,会通知监听器,重新渲染,(即遍历收集依赖队列的所有fn,并执行)
image
本文系转载,
前往查看
如有侵权,请联系
cloudcommunity@tencent.com
删除。
css
vue.js
编程算法
本文系转载,
前往查看
如有侵权,请联系
cloudcommunity@tencent.com
删除。
css
vue.js
编程算法
评论
登录
后参与评论
0 条评论
热度
最新
推荐阅读
LV.
关注
文章
0
获赞
0
目录
动态样式
动态class
动态style
表单绑定
响应式
模拟响应式实现过程
领券
问题归档
专栏文章
快讯文章归档
关键词归档
开发者手册归档
开发者手册 Section 归档
0
0
0
推荐