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 相关文章推荐
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
vue实现列表的添加点击
Dec 29 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
详解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
PHP下判断网址是否有效的代码
2011/10/08 PHP
一些不错的js函数ajax
2008/08/20 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
Python functools模块学习总结
2015/05/09 Python
Python多继承顺序实例分析
2018/05/26 Python
python获取本机所有IP地址的方法
2018/12/26 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Python 复平面绘图实例
2019/11/21 Python
Python箱型图处理离群点的例子
2019/12/09 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
Python爬取某平台短视频的方法
2021/02/08 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
自荐信结尾
2013/10/27 职场文书
个人求职信范例
2014/01/29 职场文书
八一演出活动方案
2014/02/03 职场文书
房地产开发项目建议书
2014/05/16 职场文书
婚宴父亲致辞
2015/07/27 职场文书
七年级作文之下雨天
2019/12/23 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
从原生JavaScript到React深入理解
2022/07/23 Javascript