3-5 3.5style绑定ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

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 )快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！