web前端——Vue.js基础学习之class与样式绑定
打着巩固 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>
web前端——Vue.js基础学习之class与样式绑定的更多相关文章
- web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- Web前端-Vue.js必备框架（四）
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- Web前端-Vue.js必备框架（三）
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
- Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
- Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- Web - 前端 Vue.js （1）
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...
- 两万字Vue.js基础学习笔记（二）
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
随机推荐
- Java基础加强-反射机制
反射的基石 -> Class 类(字节码)/*只要是在源程序中出现的类型,都要各自的Class实例对象,例如:int,int[],void*/如何得到各个字节码对应的实例对象(Class类型) ...
- kbmMW 5.10.10 SmartBinding问题修正
千呼万唤始出来,最新的kbmMW 5.10.01终于发布了,详情可以看xalion发的更新日志. 我期待的Smartbinding for Listview终于来了,在这一版本中,对SmartBind ...
- sed & awk 概述
概述 一般情况下,从grep到sed和awk的学习过程是很自然的.sed和awk是一般用户.程序员和系统管理员们处理文本文件的有力工具. sed的名字来源于其功能,它是个字符流编辑器(stream e ...
- Linux命令——vi、cut、tr、wc、sort、uniq
vi 和 vim ^跳转当前行第一个非空字符 Ctrl + b向下翻页 Ctrl + f向上翻页 Shift + % 找到()[] {},以及在括号之间来回切换 全局替换 一次性替换文件中的所有出现的 ...
- windows7重置网卡命令
点击windows左下角菜单键,输入cmd 然后鼠标右键 cmd 以管理员身份运行,并输入命令 netsh winsock reset, 然后回车执行. 系统会提示要求重启计算机. 重启后即重置网卡成 ...
- 【反向多源点同时BFS一个强连通图+类最短路题面】Fair-986C-Codeforce
借鉴博客:https://www.cnblogs.com/zhangjiuding/p/9112273.html 986-A. Fair /* 986-A-Fair,codeforce: 大致题意: ...
- RHEL7-RHCE培训系列教程，让您零基础入门Linux运维
本教程是旨在帮助那些刚入门IT行业或计划从事IT行业的初学者(包括开发人员和运维人员,以及想要在Linux系统维护上提升自己的网络管理员),0基础入门Linux运维,完整学习完成本系列课程相当于培训机 ...
- Oracle 11g关闭用户连接审计
sys.aud$表数据量增长较快.这时,不想关闭数据库的审计,但是又不想频繁的清理sys.aud$表.可进行如下操作关闭数据库连接的审计 noaudit connect;
- CF350E Wrong Floyd
洛谷题目链接 前言: 这题其实真的不难 回归正题: 我们首先要明白$floyd$的思想,相信你都来做这道水题了,肯定不陌生,简单的手玩后,我们可以发现: 只要有任意一个点只跟非标记点相连的话,是更新不 ...
- linux crontab 防止周期内为执行完成重复执行
问题的背景: 我们常常需要通过crontab部署某个脚本运行某些定时任务,但在实际的过程中,一旦处理不好可能导致在同一时刻出现脚本的多个运行副本,比如crontab的调度是每5 分钟运行一次脚本,如果 ...