10绑定样式

<template>
    <div>
      <h1>绑定样式</h1>
    </div>
    <!-- <div class="basic normal" id="demo" v-on:click="changeMood"> -->
      <!--  不变的东西,该怎么写就这么写变化的东西v-bind  a当表达式使用 -->
    绑定class样式 -- 字符串写法， 适用于:样式的类名不确定,需要动态指定
    <div class="basic " v-bind:class="a" id="demo" v-on:click="changeMood">
      {{name}}
    </div><br/><br/>
    绑定class样式 -- 数组写法， 适用于: 要绑定的样式个数不确定，名字也不确定
    <div class="basic" v-bind:class="classArr">
      {{name}}
    </div><br/><br/>
    绑定class样式 -- 对象写法， 适用于：要绑定的样式个数确定，名字也确定，但要动态决定用不用
    <div class="basic" v-bind:class="classObj">
      {{name}}
    </div><br/><br/>
    绑定style样式字符串写法<br/>
    const  = {fontSize : fsize + 'px'}
    <div class="basic" v-bind:style="{fontSize: fsize+'px'}" >
      {{name}}
    </div><br/><br/>
    绑定style样式字对象写法(常用)
    <div class="basic" v-bind:style="fontSize" >
      {{name}}
    </div><br/><br/>
    绑定style样式字数组写法(不常用) 数组里面是样式对象
    <div class="basic" v-bind:style=[fontSize,fontSize2] >
      {{name}}
    </div><br/><br/>
    <div class="basic" v-bind:style="styleArr" >
      {{name}}
    </div><br/><br/>
    绑定样式：<hr/>
        1. class样式<hr/>
            写法:class='xxx' xxx可以是字符串,对象,数组。<hr/>
                字符串写法适用于:类名不确定,要动态获取。<hr/>
                对象写法适用于:要绑定多个样式,个数不确定,名字也不确定<hr/>
                数组写法使用于:要绑定多个样式,个数确定,名字也确定,但不能确定用不用<hr/>
        2.style样式<hr/>
            :style="{fontSize: xxx}" 其中xxx是动态值<hr/>
            :style="[a,b]" 其中a,b 是样式对象<hr/>
  </template>
  <script>
  // import  01_初始Vue  from './components.';
  export default {
  //data的第二种写法:函数式
    data() { 
      // console.log('@@@',this);
      return {
        name:"不想听你说情话,想听你说心里话" ,
        a:'normal',
        classArr:['qinling1','qinling2','qinling3'],
        classObj:{
          qinling1:true,
          qinling2:false,
        },
        fsize:25,
        fontSize:{
          fontSize:'35px',
          color: 'blue',
        },
        fontSize2:{
          fontSize:'35px',
          color: 'blue',
          backgroundColor:'yellow',
  
        },
        styleArr:[
        {
          fontSize:'15px',
          color: 'skyblue',
        },
        {
          backgroundColor:'gray',
  
        },
        ]
      }
    },
    methods:{
      changeMood () {
        // 违规了， 亲自拿到节点， 亲自操作节点
        // document.getElementById('demo').className = 'basic happy'
        // this.a = 'happy'
        const  arr = ['happy' , 'sad' , 'normal']
        // 因为0.几取不到1 *3 也是3.几几,用Math.floor 想下取整
        // Math.floor(Math.random()*3)
        const index = Math.floor(Math.random()*3)
        this.a = arr[index]
  
  
      }
    },
    computed: {
      },
    watch: {
    }
  
    
  }
  </script>
  <style scoped>
  .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;
  }
  .qinling1{
    background: yellowgreen;
  }
  .qinling2{
    font-style: 30px;
    text-shadow: 2px 2px 10px red;
  }
  .qinling3{
    border-radius: 20px;
  }
  </style>