绑定样式
1.class样式
写法:class=“xxx” xxx可以使字符串、对象、数组
字符串法:适用于类名不确定,要动态获取
对象法:适用于要绑定多个样式,个数不确定,名字不确定,但要动态决定用不用
数组法: 适用于要绑定多个样式,个数确定,名字确定,但不确定用不用
2.style样式
:style=“{fontSize:xxx}” 其中xxx是动态值
:style="[a,b]" 其中ab是样式对象,如下


目录
4.最终代码 案例:单击div实现变换心情(sad、normal、happy)
<div class="basic" :class="mood" @click="changeMood">{{name}}div>
单击之后,下面这个框会随意变动


适用于绑定的样式个数不确定,名字也不确定
<div class="basic" :class="classArr">{{name}}div>
下面这个一下次用了三个样式

适用于绑定的样式个数确定,名字也确定,但要动态决定用不用
<div class="basic" :class="classObj">{{name}}div>
- data:{
- name:'尚硅谷',
- mood:'normal',
- classArr:['sad','normal','happy'],
- classObj:{
- atguigu1:false,
- atguigu2:false
- }
- },
- methods: {
- changeMood(){
-
- const arr=['sad','normal','happy']
- // 现在只有0,1,2 这三个数
- this.mood=arr[Math.floor(Math.random()*3)]
- }
- },
-
- })
在右侧root中进行修改

- html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title> 初识vuetitle>
-
- <script type="text/javascript" src="../js/vue.js">script>
- <style>
- .basic{
- width: 400px;
- height: 100px;
- border: 1px solid black;
- }
-
- .happy{
- border: 4px solid red;;
- background-color: rgba(255, 255, 0, 0.644);
- background: linear-gradient(30deg,yellow,pink,orange,yellow);
- }
- .sad{
- border: 4px dashed rgb(2, 197, 2);
- background-color: gray;
- }
- .normal{
- background-color: skyblue;
- }
-
- .atguigu1{
- background-color: yellowgreen;
- }
- .atguigu2{
- font-size: 30px;
- text-shadow:2px 2px 10px red;
- }
- .atguigu3{
- border-radius: 20px;
- }
- style>
- head>
- <body>
- <div id="root">
-
-
-
- <div class="basic" :class="mood" @click="changeMood">{{name}}div>
- <br>
- <br>
-
- <div class="basic" :class="classArr">{{name}}div>
-
-
- <div class="basic" :class="classObj">{{name}}div>
-
- div>
-
-
-
- body>
- <script type="text/javascript">
- //阻止vue在启动时生成生产提示
- Vue.config.productionTip=false
-
- new Vue({
- el:'#root',
- data:{
- name:'尚硅谷',
- mood:'normal',
- classArr:['sad','normal','happy'],
- classObj:{
- atguigu1:false,
- atguigu2:false
- }
- },
- methods: {
- changeMood(){
-
- const arr=['sad','normal','happy']
- // 现在只有0,1,2 这三个数
- this.mood=arr[Math.floor(Math.random()*3)]
- }
- },
-
- })
-
-
- script>
- html>
<div class="basic" :style="{fontSize:fsize+'px'}">{{name}}div>
- data:{
- fsize:40,
- name:'尚硅谷',
- }
<div class="basic" :style="styleObj">{{name}}div>
- data:{
- styleObj:{
- // fontsize是css样式中真实存在的
- // 我们这个地方直接给一个值就好了
- fontSize:'40px'
- },
-
- name:'尚硅谷',
- }