vue实现爱心形状的复选框

目录

HTML代码：

CSS代码：

Vue代码：

这个例子使用了CSS来创建一个爱心形状的复选框，并使用Vue来控制其选中状态。点击复选框时，将调用toggleChecked方法来切换checked属性的值，以控制复选框的状态。

---

 

以下是一个使用Vue实现爱心形状的复选框的例子：

HTML代码：

<div id="app"><label class="heart-checkbox":class="{ 'checked': checked }"@click="toggleChecked"><input type="checkbox" v-model="checked" hidden><span class="heart"></span></label>
</div>

CSS代码：

.heart-checkbox {display: inline-block;position: relative;cursor: pointer;margin-right: 10px;
}.heart-checkbox .heart {display: block;position: absolute;top: 0;left: 0;width: 20px;height: 20px;background-color: transparent;border: 2px solid #333;border-radius: 50%;transform: rotate(45deg);
}.heart-checkbox .heart:before,
.heart-checkbox .heart:after {content: "";display: block;position: absolute;width: 20px;height: 20px;background-color: #333;border-radius: 50%;
}.heart-checkbox .heart:before {top: -10px;left: 0;
}.heart-checkbox .heart:after {top: 0;left: -10px;
}.heart-checkbox.checked .heart {border-color: #ff69b4;
}.heart-checkbox.checked .heart:before,
.heart-checkbox.checked .heart:after {background-color: #ff69b4;
}

Vue代码：

new Vue({el: '#app',data: {checked: false},methods: {toggleChecked: function () {this.checked = !this.checked}}
})

这个例子使用了CSS来创建一个爱心形状的复选框，并使用Vue来控制其选中状态。点击复选框时，将调用toggleChecked方法来切换checked属性的值，以控制复选框的状态。