vue 实现二选一列表

<template>
<div>
<ul>
<li :class="{active:classIndex==classNum}" class="packageItem" @click="clickHandler(packItem, classIndex)" v-for="(packItem,classIndex) in items">
{{packItem.name}}

</li>
</ul>
{{defaultvalue}}
</div>
</template>

<script>
export default {
computed:{

},
data() {
return {
selectedProperties: [],
items: [
{id:1,name:'荣耀手机'},
{id:2,name:'宝马手机'}
],
curData: null,
classNum: 0,
defaultvalue:'荣耀手机',
}
},

methods:{
clickHandler (data, num) {
console.log(data.name)
this.curData = data;
this.defaultvalue=this.curData.name;
this.classNum = num;
//alert(data);
// alert(num)
}
}
}

</script>
<style type="text/css">
li{
width:120px;
height:40px;
padding:0 10px;
border:1px solid #000;
margin-bottom: 10px;
list-style: none;
}
.active{
color:red;
}
</style>

 

转载于:https://www.cnblogs.com/lwj820876312/p/9180939.html