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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
javascript中this的四种用法
May 11 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
VUE实现密码验证与提示功能
Oct 18 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
php获取远程文件内容的函数
2015/11/02 PHP
PHP闭包函数详解
2016/02/13 PHP
Yii2中datetime类的使用
2016/12/17 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
python 正则式使用心得
2009/05/07 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
Django框架视图介绍与使用详解
2019/07/18 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
高级技校毕业生自荐信
2013/11/18 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
中标通知书范本
2015/04/17 职场文书
linux下安装redis图文详细步骤
2021/12/04 Redis
Python与C++中梯度方向直方图的实现
2022/03/17 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫