Vue绑定样式,自我总结

DOCTYPE html>
<html lang="en">
  <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>Documenttitle>
    <script src="../../vue.js/vue.js">script>
    <style>
      .bg{
        background-color: red;
      }

      .bg_b{
        background-color: blue;
      }
      .font{
        font-size: 40px;
      }
      .fontColor{
        color: green;
      }

    style>

    <body>
      <div id="app">

        
        <div :style="{fontSize:num+'px',color:aa}" v-on:click="change2">{{name}}div>
        <br>

        
        <div v-bind:class="bg_red" v-on:click="change">{{name}}div>
        <br>

        
        <div v-bind:class="styleObject" v-on:click="change1">{{name}}div>
        <br>

        
        <div v-bind:class="styleList" v-on:click.stop="change">{{name}}div>
        <br>


        
      div>

      <script>
        let vm=new Vue(
          {
            el:"#app",
            data:{
              name:"小滴课堂",
              bg_red:"bg",
              styleObject:{
                bg:true,
                font:true,
                bg_b:false,
              },
              kong:" ",    
              red:"red",
              aa:"red",
              styleList:['font','fontColor','bg','bg_b'],
              num:30,
            },
            methods: {
              change(){
                this.bg_red='bg_b';
              },
              change1(){
                this.styleObject.bg=!this.styleObject.bg;
                this.styleObject.bg_b=!this.styleObject.bg_b;
              },
              change2(){
                this.num+=1;
              }
            },
          }
        )
      script>
  body>
html>

你可能感兴趣的:(前端,vue.js,前端,javascript)