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的表格操作插件
Apr 22 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
layui动态渲染生成select的option值方法
Sep 23 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
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
php报错502badgateway解决方法
2019/10/11 PHP
PHP实现计算器小功能
2020/08/28 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
小程序实现搜索框
2020/06/19 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
基于python实现名片管理系统
2018/11/30 Python
Python 占位符的使用方法详解
2019/07/10 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
实习教师个人的自我评价
2013/11/08 职场文书
应届大学生求职信
2013/12/01 职场文书
教育技术职业规划范文
2014/03/04 职场文书
病媒生物防治方案
2014/05/13 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
就业协议书范本
2014/10/08 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
介绍信的格式
2015/01/30 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
spring 项目实现限流方法示例
2022/07/15 Java/Android