vue中class和style的绑定

class的绑定方法

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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <style>
      .cs {
        background-color: yellow;
      }
      .active {
        color: red;
        font-weight: 700;
      }
      .text {
        background-color: blue;
      }
      .color {
        font-size: 50px;
        background-color: brown;
      }
      .color2 {
        color: white;
      }
    style>
  head>
  <body>
    <div id="app">
      
      
      <div :class="cs ? 'cs':''">class单个写法div>
      <button @click="cs = !cs">选中button>
      
      
      <div :class="{active:isactive,text:!isactive}">class对象写法div>
      <button @click="isactive = !isactive">选中button>
      
      
      <div :class="[colors,colors2]">class数组写法一div>
      
      <div :class="colorarr">class数组写法二div>
    div>
    <script>
      Vue.config.productionTip = false;
      var app = new Vue({
        el: "#app",
        data: {
          isactive: false,
          cs: false,
          colors: "color",
          colors2: "color2",
          colorarr:["color","color2"]
        }
      });
    script>
  body>
html>

style的绑定方法

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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <style>
head>
<body>
    <div id="app">
        
        <div :style="{color:activeColor,fontSize:fontSize+'px'}">style单个绑定div>
        
        
        <div :style="[style1,style2]">style数组绑定一div> 
        
        <div :style="styleArr">style数组绑定二div> 
    div>
    <script>
        Vue.config.productionTip = false
        var app = new Vue({
            el: "#app",
            data: {
                activeColor:"red",
                fontSize:30,
                style1:{
                    color:'blue',
                    fontWight:'700',
                    backgroundColor:'yellow'
                },
                style2:{
                    width:'300px',
                    height:'300px'
                },
                styleArr:[{
                    color:'red',
                    fontWight:'700',
                    backgroundColor:'blue'
                },{
                    width:'200px',
                    height:'200px'
                }]
            }
        })
    script>
body>
html>

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