web前端——Vue.js基础学习之class与样式绑定
2024-09-02 13:54:24
打着巩固 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>
最新文章
- [译]处理文本数据(scikit-learn 教程3)
- Java tomcat启动失败(Servlet3.0 Web Project):A child container failed during start
- 设计模式:简单工厂(Simple Factory)
- CURL常用命令(转)
- mysql用户备份与修复
- 编译 proto 文件到指定语言的代码
- 在信号处理函数中调用longjmp
- Oracle之存储过程
- 当ASP.NET MVC模型验证遇上CKEditor
- iOS之ASIHttp简单的网络请求实现
- NHibernate执行原生带sum的sql
- PHP PDO sqlite ,Unable to Open database file的解决方法
- MySQL 更新中国列:1366 Incorrect string value 问题解决了
- shuffle过程简介--笔记
- LESS的简单介绍
- mui的switch开关的应用
- 微信小程序制作家庭记账本之一
- 【BZOJ】2815: [ZJOI2012]灾难
- 完全卸载vs2013 2015
- python time 时间处理
热门文章
- 【转载】salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建
- jquery操作select下拉框:取值,赋值,删除
- 对WAF的一些认知
- 使用C#的Flags特性
- python学习之基础入门,安装,字符串,数据转换,三元运算符
- spring-JDBC配置,使用,一些报错,mybatis原理,优化
- [唐胡璐]Selenium技巧- dataProvider实现数据驱动
- EMF中复制对象属性
- Fibonacci数性质
- jQuery.proxy(function,context)