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 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
vue路由跳转传参数的方法
May 06 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
jquery实现抽奖功能
Oct 22 jQuery
react中的DOM操作实现
Jun 30 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
php实现ping
2006/10/09 PHP
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
简单JS代码压缩器
2006/10/12 Javascript
Javascript Select操作大集合
2009/05/26 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
vue中v-model对select的绑定操作
2020/08/31 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
python list中append()与extend()用法分享
2013/03/24 Python
python生成随机验证码(中文验证码)示例
2014/04/03 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
水产养殖学应届生求职信
2013/09/29 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
2014年档案室工作总结
2014/12/01 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
主题班会开场白
2015/06/01 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python
php png失真的原因及解决办法
2021/11/17 PHP
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python