Days02.
实例选项配置
一、课程大纲
1、样式操作
class
样式style
样式
2、侦听器
3、计算属性
4、过滤器
5、事件处理
6、表单操作
7、综合案例:留言板
8、项目任务:品牌管理-数据复杂度升级:增删改查
二、课程内容
1、样式处理
Vue
中标签元素的样式主要区分为两种:
- 固定样式:传统的
css
语法,直接修饰标签元素 - 动态样式:可能会根据不同的条件发生变化,需要通过
Vue
变量数据实现控制
(1) class
样式绑定
class
样式的绑定方式有三种:字符串拼接、数组格式、对象格式(掌握)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box, #box2, #box3{
width: 500px; height: 200px;}
.bg-dark{
background: #333; color: white;}
.bg-light{
background: #eee; color: #333; box-shadow: #000 0 0 2px;}
.fontStyle{
font-size: 22px; font-weight: 600;}
</style>
</head>
<body>
<div id="app">
<!-- 1、class 样式,字符串拼接方式;很少使用-->
<!-- <div id="box" :class="'bg-dark' + ' ' + 'fontStyle'"> -->
<div id="box" class="bg-dark fontStyle">
class样式设置
</div>
<!-- 2、class样式,数组格式-->
<div id="box2" :class="[bgLight, fs]">
class样式设置
</div>
<!-- 3、class样式,对象格式,可以通过变量控制某个样式是否生效 -->
<!-- 最常用的样式设置方式,使用的时候需要注意:-->
<!-- :class="{key: value}" key就是样式名称/并不是变量-->
<!-- 如果样式名称中不包含中划线,直接编写;如果包含中划线,需要在样式名称上添加引号 -->
<div id="box3" :class="{
'bg-dark':isDark, fontStyle: isFs}">
class样式设置
</div>
</div>
</body>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
bgLight: 'bg-light',
bgDark: 'bg-dark',
fs: 'fontStyle',
isDark: true,
isFs: true
}
})
</script>
</html>
拓展:面试题,观察下面的代码,指出代码中的问题
<div id="box2" :class="[bgLight, 'fs']">
class样式设置
</div>
<div id="box3" :class="{bg-dark:isDark, fontStyle: isFs}">
class样式设置
</div>
<script>
const app = new Vue({
....
data: {
bgLight: 'bg-light',
fs: 'fontStyle',
bgDark: 'bg-dark',
isDark: true,
isFs: true
}
})
</script>
(2) style
样式绑定
style
样式的设置,主要包含对象格式和数组格式;操作过程中对象格式的语法比较常用
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box, #box2, #box3, #box4, #box5{
width: 500px; height: 200px;}
.bg-dark{
background: #333; color: white;}
.bg-light{
background: #eee; color: #333; box-shadow: #000 0 0 2px;}
.fontStyle{
font-size: 22px; font-weight: 600;}
</style>
</head>
<body>
<div id="app">
<!-- 对象格式:可以将样式直接编写到表达式中 -->
<div id="box4" :style="{backgroundColor:bgColor, color: fontColor}">
style样式设置
</div>
<!-- 对象格式:表达式中,直接填写一个对象变量 -->
<div id="box5" :style="styleObj">
style样式设置
</div>
</div>
</body>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:<