10、绑定样式

最新推荐文章于 2024-07-12 09:36:48 发布

终是痴情负了空

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量213

点赞数

分类专栏： vue基础文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_51092575/article/details/126461225

版权

vue基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

绑定样式

1. class样式

号法:class="“xxx” xXX可以是字符非、对象、数组。字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式,个致不确定，名字也不确定-
数组写法适用于:要绑定多个样式，个数确定，名字也确定。但不确定用不用

2. style样式

:style-“”{fontsize: xXX}"其中xxx是动态值。
: style="[a,b]”其中a、b是样式对象-

案例实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script 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">
<!--  绑定class样式--字符串写法，适用于样式的类名不确定，需要动态指定-->
  <div class="basic" :class="mood" @click="changMood">{{name}}</div>
  <hr>
<!--  绑定class样式 --数组写法，适用于：绑定的个数和样式都不确定、名字也不确定-->
  <div class="basic" :class="classArr">{{name}}</div>
<hr>
<!--  绑定class样式--对象写法，适用于样式、个数、名字确定，但要动态决定用不用-->
  <div class="basic" :class="classObj">{{name}}</div>
<!--绑定style样式-- 对象写法-->
  <div class="basic" :style="styleObj">{{name}}</div>

  <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
  <!--绑定style样式-- 数组写法-->
  <div class="basic" :style="[styleArr]">{{name}}</div>

  <!--  <div class="basic" :style="{fonSize:fsize +'px'}">{{name}}</div>-->
</div>
<script type="text/javascript">
  Vue.config.productionTip = false;
  const vm = new Vue({
    el:'#root',
    data:{
      name:'尚硅谷',
      mood:'normal',
      classArr:['atguigu1','atguigu2','atguigu3'],
      classObj:{
        atguigu1:false,
        atguigu2:true
      },
      // fSize:40,
      styleObj:{
        fontSize:'40px',
        color:'red'
      },
      styleObj2:{
        backgroundColor:'black'
      },
      styleArr:[
        {
          fontSize: '50px',
          color:'blue'
        },
        {
          backgroundColor: 'gray'
        }
      ]
    },
    methods:{
      changMood(){
        const array =['happy','sad','normal']
        const index = Math.floor(Math.random()*3)
        this.mood = array[index]
      },

    }
  })
</script>
</body>
</html>