目录
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}}
})