<view class="feedback_tips"> <view class="feedback_tip1"> <uni-tag text="产品Bug" size="default" type="primary" :inverted="inverted1" :circle="true" @click="setInverted1"></uni-tag> </view> <view class="feedback_tip2"> <uni-tag text="我要吐槽" size="default" type="error" :inverted="inverted2" :circle="true" @click="setInverted2"></uni-tag> </view> <view class="feedback_tip3"> <uni-tag text="功能建议" size="default" type="success" :inverted="inverted3" :circle="true" @click="setInverted3"></uni-tag> </view> <view class="feedback_tip4"> <uni-tag text="其他" size="default" type="default" :inverted="inverted4" :circle="true" @click="setInverted4"></uni-tag> </view> </view>如果是这样子的代码呢 我要四个按键当点击第二个时之前点击的会变成false
时间: 2023-07-21 20:12:01 浏览: 44
如果你想在点击第二个按键时将之前点击的按键状态设置为 `false`,你可以使用一个数组来存储每个按键的状态,并在点击按键时更新对应的状态。以下是一个示例的设计方案:
1. 在 `data` 中定义一个对象来存储按键的状态:
```javascript
data() {
return {
inverted: {
inverted1: false,
inverted2: false,
inverted3: false,
inverted4: false
}
};
}
```
2. 在点击按键的方法中,将被点击按键之前的所有按键状态设置为 `false`:
```javascript
methods: {
setInverted1() {
this.inverted.inverted1 = true;
this.inverted.inverted2 = false;
this.inverted.inverted3 = false;
this.inverted.inverted4 = false;
},
setInverted2() {
this.inverted.inverted1 = false;
this.inverted.inverted2 = true;
this.inverted.inverted3 = false;
this.inverted.inverted4 = false;
},
setInverted3() {
this.inverted.inverted1 = false;
this.inverted.inverted2 = false;
this.inverted.inverted3 = true;
this.inverted.inverted4 = false;
},
setInverted4() {
this.inverted.inverted1 = false;
this.inverted.inverted2 = false;
this.inverted.inverted3 = false;
this.inverted.inverted4 = true;
}
}
```
3. 在模板中使用 `v-bind` 绑定样式和点击事件:
```html
<view class="feedback_tips">
<view class="feedback_tip1">
<uni-tag
text="产品Bug"
size="default"
type="primary"
:inverted="inverted.inverted1"
:circle="true"
@click="setInverted1"
></uni-tag>
</view>
<view class="feedback_tip2">
<uni-tag
text="我要吐槽"
size="default"
type="error"
:inverted="inverted.inverted2"
:circle="true"
@click="setInverted2"
></uni-tag>
</view>
<view class="feedback_tip3">
<uni-tag
text="功能建议"
size="default"
type="success"
:inverted="inverted.inverted3"
:circle="true"
@click="setInverted3"
></uni-tag>
</view>
<view class="feedback_tip4">
<uni-tag
text="其他"
size="default"
type="default"
:inverted="inverted.inverted4"
:circle="true"
@click="setInverted4"
></uni-tag>
</view>
</view>
```
在以上代码中,通过 `inverted` 对象存储了每个按键的状态。在点击每个按键时,对应的状态会被设置为 `true`,同时其他按键的状态会被设置为 `false`。
这样,当你点击第二个按键时,之前点击的按键会被设置为 `false`,只有当前点击的按键状态会被设置为 `true`。
希望以上信息对你有帮助。如果还有其他问题,请随时提问。