当前位置：网站首页>Bind class style and bind style style

Bind class style and bind style style

2022-07-25 23:12:00 【Dignified 304】

css Code

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .basic {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        margin: 20px;
    }

    .red {
        background-color: red;
    }

    .blue {
        background-color: blue;
    }

    .yellow {
        background-color: yellow;

    }

    .radius {
        border-radius: 10px;
    }

    .widthboreder {
        border: 10px solid #000;
    }
</style>

html Code

binding class The pattern is v-bind:class="xxx" Shorthand for (:class="xxx"） xxx yes data Attributes in can be arrays or objects



<body>
    <div class="box">
        <!--  String writing   Applicable to style class name uncertainty , Need to dynamically specify  -->
        <div class="basic" :class="myColor" @click="changeColor">{
   {name}}</div>
        <!--  Array writing   Applicable to the indeterminate number of styles to be bound , The class name is also uncertain  -->
        <div class="basic" :class="colorArr">{
   {name}}</div>
        <!--  Array writing   Applicable to the determination of the number of styles to be bound , The class name is also determined   But dynamic decision -->
        <div class="basic" :class="colorObj">{
   {name}}</div>
        <!--  inline  -->
        <div class="basic" :style="styleObj1">{
   {name}} object </div>
        <div class="basic" :style="[styleOb1,styleObj2]">{
   {name}}style Array </div>
    </div>
</body>

js Code


<script>
    //  Cancel a developer prompt 
    Vue.config.productionTip = false;

    //  Create examples 
    new Vue({
        el: '.box',
        data: {
            name: ' Lau Andy ',
            myColor: 'red',
            colorArr: ['blue', 'radius'],
            colorObj: {
                red: false,
                blue: false,
                yellow: true,
                radius: true
            },
            styleObj1: {
                //  Property name must be css The name used in 
                fontSize: '30px',
            },
            styleObj2: {
                backgroundColor: 'orange',
            }
        },
        methods: {
            changeColor() {
                const arr = ['red', 'blue', 'yellow'];
                this.myColor = 'blue',
                    console.log(this.myColor);
            }
        }
    })
</script>

原网站

版权声明
本文为[Dignified 304]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190504024814.html

当前位置：网站首页>Bind class style and bind style style

Bind class style and bind style style

边栏推荐

猜你喜欢

随机推荐