孙空空的Vue之路-Day03-Class与Style的绑定操作

Class与Style的绑定操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>class与style的绑定操作</title><style>.aClass {color: #ff42b6;}.bClass {color: #ff941e;}</style>
</head>
<body><div id="demo"><h1>class与style的绑定操作</h1><!--class可以绑定字符串、数组、对象--><p :class="a">class绑定字符串</p><p :class="{aClass:isA , bClass:isB}">class绑定对象</p><p :style="{color:activeColor , fontSize:fontSize + 'px'}">style的绑定操作</p><button @click="updateColor">点击更改颜色</button>
</div><script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({el:'#demo',data:{a:'aClass',isA:true,isB:false,activeColor:'#ff941e',fontSize:'20'},methods: {updateColor() {this.a = 'bClass',this.isA = false,this.isB = true,this.activeColor = '#ff42b6',this.fontSize = '30'}}})</script>
</body>
</html>

孙空空的Vue之路-Day03-Class与Style的绑定操作相关推荐

孙空空的Vue之路-Day07-事件处理
事件处理 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
vue动态路由加载组件，找不到module问题
vue动态路由加载组件,找不到module问题 vue动态加载路由并挂载到vue.路由信息由后端给出,同时component的路径也是后端给出,但是动态加载该路径会报错. 原因:webpack 编译e ...
【重学Vue】数据响应原理真的是双向绑定吗？
最近 Ant Design Vue 作者 - 唐金州,在某平台开课了,在整个课程中系统的讲述了Vue的开发实战.在第八讲中介绍了Vue双向绑定的问题,这里我整理一些资料客观的分析一下 Vue数据响应原 ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
vue-html5-editor接收数据,在vue中获取wangeditor的html和text的操作
目的:vue 中获取 wangeditor 的 html 和 text. 补充知识:vue-cli webpack 引入 wangeditor(轻量级富文本框) 1:使用npm下载: //(注意 wa ...
08.vue.js实战笔记（计算属性、v-bind及class和style的绑定、内置指令、方法与事件）
1.计算属性所有的计算属性都以函数的形式写在vue实例的computed选项内,最终返回计算后的结果 <!DOCTYPE html> <html lang="en&quo ...
vue基础-动态class、动态style、vue过滤器、vue计算属性vue基础-动态class、动态style、vue过滤器、vue计算属性
vue基础-动态class.动态style.vue过滤器.vue计算属性文章目录 vue基础-动态class.动态style.vue过滤器.vue计算属性 vue基础-动态class vue基础-动 ...
Vue的数据绑定、Vue的事件绑定、Class和Style的绑定
一.Vue的数据绑定 1. 单向数据绑定:将Model绑定到View上,当通过JavaScript代码改变了Model时,View就会自动刷新.不需要进行额外的DOM操作就可以实现视图和模型的联动 ...
Vue.js（day03）
Vue.js(day03) 上面为语雀链接,因为笔记在语雀中写的,所以在这儿有些功能实现不了,所以请移步链接. Vue.js:

孙空空的Vue之路-Day03-Class与Style的绑定操作

孙空空的Vue之路-Day03-Class与Style的绑定操作相关推荐

最新文章

热门文章