版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
Vue.js前端开发框架应用Vue.js样式绑定目
录Vue.js绑定样式通过数组绑定样式Vue.js绑定内联样式使用计算属性绑定样式Vue.js样式绑定一、Vue.js绑定样式静态绑定样式
静态绑定指的是直接使用v-bind:class(缩写为:class)指令将样式绑定到HTML元素的class属性,该方式等同于直接固定HTML元素的样式,是最基本的绑定样式方式。
【案例5‑1】直接绑定样式。Vue.js样式绑定一、Vue.js绑定样式动态绑定样式Vue.js可以使用绑定对象或绑定数组的方式设置HTML元素的样式。
绑定对象指的是给v-bind:class(缩写为:class)指令传递一个对象来动态设置HTML元素的样式。
【案例5‑2】绑定对象设置样式。案例中“bigFont”样式是否有效是由“useFont1”的值决定的,true为有效,false为无效。Vue.js样式绑定一、Vue.js绑定样式动态绑定样式Vue.js可以使用绑定对象或绑定数组的方式设置HTML元素的样式。
绑定对象指的是给v-bind:class(缩写为:class)指令传递一个对象来动态设置HTML元素的样式。
【案例5‑3】动态改变样式。Vue.js样式绑定一、Vue.js绑定样式绑定多个样式Vue.js可以使用绑定对象或绑定数组的方式设置HTML元素的样式。采用:class指定绑定对象时可以为一个html元素同时绑定多个样式,并且可以动态指定哪些样式启用,哪些样式不启用。
【案例5‑4】绑定多个样式。:class指令绑定的对象可以有多个字段,每个字段对应样式名,字段的值决定该样式是否启用。目
录Vue.js绑定样式通过数组绑定样式Vue.js绑定内联样式使用计算属性绑定样式Vue.js样式绑定二、通过数组绑定样式Vue.js支持绑定包含CSS样式的数组,通过:class指令绑定一个包含多个CSS样式或样式对象的数组,数组中的全部样式会被渲染到目标html元素
【案例5‑5】数组绑定样式。:class指令绑定数组,数组元素可以是样式名或表示样式的对象目
录Vue.js绑定样式通过数组绑定样式Vue.js绑定内联样式使用计算属性绑定样式Vue.js样式绑定三、Vue.js绑定内联样式直接绑定内联样式:style指令可绑定包含内联样式的JavaScript对象,其对应的是html元素的style属性。
【案例5‑6】绑定内联样式。:style指令绑定含内联样式的对象,对象的字段是内联样式名,值是样式值。Vue.js样式绑定三、Vue.js绑定内联样式通过数组绑定内联样式:style指令也持绑定一个包含多个内联样式JavaScript对象的数组,数组中的对象包含的内联样式会被合并后渲染到目标html元素上。
【案例5‑7】通过数组绑定内联样式。:style指令绑定数组,数组元素是内联样式对象。目
录Vue.js绑定样式通过数组绑定样式Vue.js绑定内联样式使用计算属性绑定样式Vue.js样式绑定三、使用计算属性绑定样式:class和:style指令都支持使用计算属性绑定样式,采用计算属性后样式的绑定能更好的支持包含复杂程序逻辑的
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 钢筋加工标准合同
- 2024办公楼外立面装修工程施工合同
- 2024专利权转让协议参考样本
- 借款及抵押合同
- 建设工程施工合同范本(完整填写版)
- 山东省2024年普通高等学校招生全国统一考试(二)2023至2024化学试题附参考答案(解析)
- 湖南省师范大学附属中学2023至2024学年高三月考(七)化学试题附参考答案(解析)
- 广东省茂名市2024届高三年级第二次综合测试(茂名二模)化学试题附参考答案(解析)
- 2024全新运输货物协议下载
- 2024年合成氟金云母单晶片合作协议书
- 捷顺门禁系统操作说明
- 建筑名词中英文对照
- 小学生有关读书的相声
- 判断分子空间几何构型的简单方法
- 水池侧壁及底板配筋计算程序
- 硅溶胶精密铸造项目可行性研究报告-用于立项备案
- excel入门基础教程课件
- 基于SIMULINK的水轮机组调节系统仿真研究
- 双减下初中英语阅读型作业的分层设计
- 湖北卫生计生专业技术人员晋升职称前到基层服务记录表教学文案
- 机床电气控制技术课后答案.doc
评论
0/150
提交评论