使用vue写一段客户喜好选择的代码
时间: 2024-05-21 18:10:22 浏览: 21
<template>
<div>
<h1>选择您的喜好</h1>
<h2>您喜欢的颜色:</h2>
<div v-for="(color, index) in colors" :key="index">
<input type="checkbox" :id="'color'+index" :value="color" v-model="selectedColors">
<label :for="'color'+index">{{ color }}</label>
</div>
<h2>您喜欢的食物:</h2>
<div v-for="(food, index) in foods" :key="index">
<input type="checkbox" :id="'food'+index" :value="food" v-model="selectedFoods">
<label :for="'food'+index">{{ food }}</label>
</div>
<h2>您喜欢的音乐类型:</h2>
<div v-for="(music, index) in musicTypes" :key="index">
<input type="checkbox" :id="'music'+index" :value="music" v-model="selectedMusic">
<label :for="'music'+index">{{ music }}</label>
</div>
<button @click="submit">提交</button>
</div>
</template>
<script>
export default {
data() {
return {
colors: ['红色', '黄色', '蓝色', '绿色'],
foods: ['汉堡', '披萨', '寿司', '烤肉'],
musicTypes: ['流行', '摇滚', '电子', '古典'],
selectedColors: [],
selectedFoods: [],
selectedMusic: []
};
},
methods: {
submit() {
console.log('您选择的颜色:', this.selectedColors);
console.log('您选择的食物:', this.selectedFoods);
console.log('您选择的音乐类型:', this.selectedMusic);
}
}
};
</script>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)