14 vue的data函数中对象和数组的方式绑定模板样式
2023-09-11 14:14:57 时间
[基础]模板样式绑定1-初识
场景
这篇文章我们主要学习Vue中的一些关于样式(style)的内容。
样式绑定的内容还是不少的,所以分两篇文章:
初识
进阶来讲述
首先我们要编写一个基本的最简单的页面。
准备干净的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<script src="https://unpkg.com/vue@next" ></script>
<style>
.red{color:red;}
.green{color:green;}
.background{ background-color: orange;}
</style>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
classString: 'red'
}
},
template: `<h2 v-bind:class="classString"> hello </h2>`
});
const vm = app.mount("#app");
</script>
</body>
</html>
写两个最基本的样式 并引入到模板
在文件的下方,我们写三个最基本的样式red、green和background,代码分别如下:
<style>
.red{color:red;}
.green{color:green;}
.background{ background-color: orange;}
</style>
引用样式,在Vue的模板中引用和普通的html的方法一样。
直接写class加上类名就可以了。
template:`<h2 class="red">willem</h2>`
这时候你可以考虑一个问题,如果你希望程序足够灵活,样式也是可以控制的,这样引入样式的方法就不行了。
你需要先在Data
中声明变量,然后在模板template中进行绑定。
声明data
变量:
data(){
return {
classString:'red',
}
},
有了这个变量(或者叫做数据项)以后,就可以用bind的形式进行绑定。
<h2 v-bind:class="red">willem</h2>
<h2 :class="red">willem</h2>
绑定同样使用v-bind,你也可以使用简写:
。
上面的两种形式都可以进行绑定。
这时候你可以到浏览器中查看一下效果,如果一切正常,此时应该还是红色的。
此时你可以利用浏览器的控制台,输入对应的代码,直接控制样式了。
vm.$data.classString='green'
Vue中用对象和数组的形式控制样式
对象的绑定方式
比如现在用对象的形式进行绑定样式,好处是一次可以绑定多个样式。
比如这样的代码:
data(){
return {
classString:'red',
classObject:{red:true,background:true}
}
},
值为true代表绑定,值为false代表不绑定这个样式。
然后进行绑定:
template:`<h2 :class="classObject">willem</h2>`
这时候再到浏览器中查看效果,就会有两个样式被绑定了red和background
。如果你这首把red改为false
,那效果就是只有背景颜色,没有字体颜色了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<script src="https://unpkg.com/vue@next" ></script>
<style>
.red{color:red;}
.green{color:green;}
.background{ background-color: orange;}
</style>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
classString: 'red',
classObject:{red:true,background:true}
}
},
template: `<h2 v-bind:class="classObject"> hello </h2>`
});
const vm = app.mount("#app");
</script>
</body>
</html>
数组的绑定方式
再来看一下数组的绑定方式,数组也是可以绑定多个样式的。
代码如下:
data(){
return {
classString:'red',
classObject:{red:true,background:true},
classArray:['green','background'],
}
},
这时候再修改一下绑定值,页面样式就变成了绿字,橙色的底啦。
template:`<h2 :class="classArray">willem</h2>`
你也可以在这种数组的数据项中,再嵌套对象的形式。
classArray:['green','background',{red:true}],
如果看不到效果,可以在CSS样式中增加 !important
,当然你也可以在浏览器的控制台查看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<script src="https://unpkg.com/vue@next" ></script>
<style>
.red{color:red !important;}
.green{color:green;}
.background{ background-color: orange;}
</style>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
classString: 'red',
classObject:{red:true,background:true},
classArray:['green','background',{red:true}],
}
},
template: `<h2 v-bind:class="classArray"> hello </h2>`
});
const vm = app.mount("#app");
</script>
</body>
</html>
相关文章
- (尚052)+(尚053) Vue_源码分析_模板解析_大括号表达式
- (尚018-第二章2.1)Vue使用vue-cli创建模板项目
- [转]Vue中computed用法
- Vue 父子组件之间的通信
- vue - check-version
- vue+iview tables多个分页实现
- mui + vue 模板
- Vue——详解MVVM模型在vue中的使用
- 【vue系列-05】vue的生命周期(详解)
- Vue的Key属性,v-for和v-if,v-if/v-show,v-pre不渲染,v-once只渲染一次
- (28)打鸡儿教你Vue.js
- (ref)vue遍历ref或动态或多层遍历动态ref
- vue页面是否缓存的两种方式
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目 (增补)
- Vue报错笔记(1)vue.esm.js?efeb:628 [Vue warn]: Property or method “handleClick“ is not defined on the...
- Vue+Echarts监控大屏实例六:智慧养老监控模板实例上
- Vue+Echarts监控大屏实例三:交通违规监控模板实例
- vue学习笔记六:Jquery VS Vue之网络请求明细对照
- vue文档摘录五:实例 property
- vue router嵌套路由
- Vue常用项目优化策略
- vue-router 如果设置页面标题
- 浅析vue-cli如何配置NODE_ENV等各种环境变量及NODE_ENV设置为test、development以及其他值时会出现什么情况
- Vue实战第2章:简单的分配页面布局
- 手把手学习Vue3.0:开发工具WebStorm和Vue模板文件介绍
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- Django+Vue项目学习第二篇:vue项目创建
- vue 挂载点 实例 模板
- [置顶] vue-cli的webpack模板项目配置文件分析
- vue 登录页背景-粒子特效(Vue-Particles)