《3-5 3.5style绑定ppt课件 Vue.js基础与应用开发实战(微课版).pptx》由会员分享,可在线阅读,更多相关《3-5 3.5style绑定ppt课件 Vue.js基础与应用开发实战(微课版).pptx(9页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
3-5 3.5 style绑定教学课件 Vue.js基础与应用开发实战(微课版)3.5 style绑定3.5.1 使用“v-bind:style”直接设置样式v-bind:style十分直观,看起来很像CSS,其实它是一个JavaScript对象。CSS属性名可以用驼峰式(camelCase命名法)或者短横分隔(配合引号)命名法。【实例3-14】使用“v-bind:style”直接设置文本内容的样式【操作要求】创建网页0314.html,使用“v-bind:style”直接设置文本内容的样式为:颜色为blue,文字大小为24px。【实现过程】使用HTML编辑器Dreamweaver创建网页0314.html,在该网页中编写以下代码实现要求的功能。欢迎登录 var vm=new Vue(el:#app,data:activeColor:blue,size:24 )HTML将被渲染为:欢迎登录3.5.2 使用“v-bind:style”绑定样式对象使用“v-bind:style”直接绑定到一个样式对象会更好,让模板更清晰。【示例】:demo030501.html代码如下:欢迎登录 var vm=new Vue(el:#app,data:objStyle:color:blue,fontSize:24px )快乐学习!高效学习!快乐学习!高效学习!祝学习进步!祝学习进步!