Vue sets the class of the object button according to the different values selected by the checkbox

set the class (buybtn-1,buybtn-2,buybtn-3,buybtn-4) of the object button according to the style selected by the radio box

<button type="button" class="hide" title="" ></button>

<div class="form-row">
    <label class="radio-inline">
        <input type="radio" v-model="buyBtnStyle" name="BBS" id="inlineRadio1" value="buyBtn1"> 1
    </label>
    <label class="radio-inline">
        <input type="radio" v-model="buyBtnStyle" name="BBS" id="inlineRadio2" value="buyBtn2"> 2
    </label>
    <label class="radio-inline">
        <input type="radio" v-model="buyBtnStyle" name="BBS" id="inlineRadio3" value="buyBtn3"> 3
    </label>
    <label class="radio-inline">
        <input type="radio" v-model="buyBtnStyle" name="BBS" id="inlineRadio4" value="buyBtn4"> 4
    </label>
</div>

Css html5 vue.js

Mar.18,2021

suggest to refer to the official website ide/class-and-style.html-sharp%E5%AF%B9%E8%B1%A1%E8%AF%AD%E6%B3%95" rel=" nofollow noreferrer "> Class binds to Style

<div :style="{'margin-top': index === 0 ? 0 : 6.5 + 'px'}" :class="{'img_gray': thirdQty === 0}"></div>
data(){
    return {
        index: 0,
        thirdQty: 0
    }
}

<button type="button" :class="['hide',buyBtnStyle]" title="" ></button>
<div class="form-row">
    <label class="radio-inline" v-for="(item,index) in [{value:'buyBtn-1',name:'1'},{value:'buyBtn-2',name:'2'}]" :key="index">
        <input type="radio" v-model="buyBtnStyle" name="BBS" :value="item.value"> {{item.name}}
    </label>
</div>

Previous: When encapsulating some general methods, it is better to add more methods or to distinguish them by configuration.

Next: Vue webpack

Vue page switching fixed positioning problem?
<template> <div style="height: 100%;"> <mt-header title=""> <mt-button icon="back" slot="left" v-tap="{methods: switchView, view: Post }">< mt-button> &l...

Css3 css html5 vue.js

Feb.27,2021
Vue uses picture-card of el-upload in element-ui
how do I render the images, returned by the API to the photo wall of element-ui? Baidu on its own for a long time, did not find similar problems ~ help you giant! ...

Css html5 vue.js

Mar.12,2021
Can different element contents be placed in vue custom components?
problem description suppose I create a vue project, in which I create a component (page) A _ Magi B, and then I create a container component C ~ ~ C is just a container. I refer to C in An and B respectively, but I hope that C in AB is not the same co...

Css html5 vue.js less javascript

Jul.06,2021
WeChat Mini Programs: (see the picture) about the function of ordering time.
what I want to make is that is expected to arrive at the store with a fixed time of two hours, time period can be selected by yourself, after selection, there is a yellow horizontal line to select these two time periods, can you tell me how to do...

Css html5 vue.js javascript WeChat-Mini-Programs

Jul.08,2022

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b386eb-2c120.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b386eb-2c120.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?