Vue.js基础学习之class与样式绑定


Posted in Javascript onMarch 20, 2017

打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧:

<html>
<head>
 <meta charset="utf-8">
 <title>Vue test</title>
 <style type="text/css">
 body {font-family: Verdana;}
 p { font-family: Times, "Times New Roman", serif;}
 .static.active {color: green; font-size: 35px;}
 div.text-danger {color: red;font-size: 25px;}
 div.active {color: blue;font-family: Verdana;}
 </style>

 <script src="./vue.min.js"></script>
</head>
<body>

<div id="app">
 <!-- Create an instance of the todo-item component -->
 <todo-item></todo-item>
</div>

<div class="static"
 v-bind:class="{ active: isActive, 'text-danger': hasError }">
 <p>class property set.</p>
</div>

<div id="app3" 
 v-bind:class="[activeClass,errorClass]">
 <p>group class property set.</p>
</div>

<div id="app4" v-bind:class="[isActive ? 'active' : 'text-danger']">
 <p>三元表达式加样式</p>
</div>

<div id="app5">
 <my-component v-bind:class="{ active: isActive }"></my-component> 
</div>

<div id="app6">
 <p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">绑定内联样式</p>
 <p v-bind:style="styleObject">对象样式绑定</p>
</div>

<script>

Vue.component('todo-item', {
 template: '<p>todo test.</p>'
})

// 一定要实例化才能用
var app = new Vue({
 el: '#app'
})

// 用类选择器构造一个Vue对象并绑定额外的class属性
var app2 = new Vue({
 el: '.static',
 data: {
 isActive: false,
 hasError: true
 }
})

// 数组语法加 class (因为是从下往上拿样式,所以text-danger的color样式被覆盖)
var app3 = new Vue({
 el: '#app3',
 data: {
 activeClass: 'active',
 errorClass: 'text-danger'
 }
})

var app4 = new Vue({
 el: '#app4',
 data: {
 isActive: true
 }
})

Vue.component('my-component',{
 template: '<p class="static">在已经定义好样式的自定义组件上加样式</p>'
})
var app5 = new Vue({
 el: '#app5',
 data: {
 isActive: true
 }
})

// 绑定内联样式
var app6 = new Vue({
 el: '#app6',
 data: {
 activeColor: '#FF00FF',
 fontSize: 30,
 styleObject: {
  color: '#585858',
  fontSize: '25px'
 }
 }
})



</script>

</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
JS高级技巧(简洁版)
Jul 29 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
详解Vue中添加过渡效果
Mar 20 #Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 #Javascript
JavaScript 过滤关键字
Mar 20 #Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 #Javascript
js实现鼠标拖动功能
Mar 20 #Javascript
基于vue2的table分页组件实现方法
Mar 20 #Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 #Javascript
You might like
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
python opencv判断图像是否为空的实例
2019/01/26 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
python如何支持并发方法详解
2020/07/25 Python
详解Django中异步任务之django-celery
2020/11/05 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
大学生个人实习的自我评价
2014/02/15 职场文书
生日宴会主持词
2014/03/20 职场文书
关于工作经历的证明书
2014/10/11 职场文书
骨干教师考核评语
2014/12/31 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
2015年党建工作总结
2015/03/30 职场文书
工作态度怎么写
2015/06/25 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书