給id屬性用v-bind動態繫結物件和字串
阿新 • • 發佈：2019-01-08
class和id 動態的繫結一個字串達到自定義名稱的方法：:class="'字串'+item.value" :id="'字串'+item.value"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分配</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style type="text/css">
table{border:#ccc 0px solid; margin:0px auto;}
th{height:40px; line-height:40px; border-bottom:#ccc 1px solid;}
td{height:30px; line-height:30px; border-bottom:#ccc 1px solid; font-size:12px;}
</style>
</head>
<body>
<div id="app" style="width:1000px; overflow: auto; margin:0px auto">
<table width="1000" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th width="150" align="center">區域</th>
<th width="150" align="center">店</th>
<th align="center">組</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in res">
<td align="center">{{item.area}}</td>
<td align="center">{{item.store}}</td>
<td align="left">
<span v-for="(items,indexs) in item.group"><input type="radio" name="group" :value="items.group_id" :id="'group'+items.group_id"><label :for="'group'+items.group_id">{{items.group_name}}{{items.people_num}}人[{{items.manager}}]</label></span>
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:"#app",
data:{
res:[
{
"area":"唐山地區",
"area_id":"10",
"store":"鳳凰園店",
"store_id":"11",
"nature":"1",
"group":[
{
"group_name":"B組",
"manager":"李凱旋",
"people_num":"18",
"group_id":"120"
},
{
"group_name":"C組",
"manager":"靳國強",
"people_num":"10",
"group_id":"121"
},
{
"group_name":"E組",
"manager":"張少龍",
"people_num":"7",
"group_id":"122"
}
]
},
{
"area":"唐山地區",
"area_id":"20",
"store":"天元駿景店",
"store_id":"21",
"nature":"1",
"group":[
{
"group_id":"123",
"group_name":"A組",
"manager":"劉海生",
"people_num":"16"
},
{
"group_id":"124",
"group_name":"C組",
"manager":"殷志豪",
"people_num":"11"
},
{
"group_id":"125",
"group_name":"D組",
"manager":"張碩",
"people_num":"5"
}
]
}
]
}
});
</script>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分配</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style type="text/css">
table{border:#ccc 0px solid; margin:0px auto;}
th{height:40px; line-height:40px; border-bottom:#ccc 1px solid;}
td{height:30px; line-height:30px; border-bottom:#ccc 1px solid; font-size:12px;}
</style>
</head>
<body>
<div id="app" style="width:1000px; overflow: auto; margin:0px auto">
<table width="1000" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th width="150" align="center">區域</th>
<th width="150" align="center">店</th>
<th align="center">組</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in res">
<td align="center">{{item.area}}</td>
<td align="center">{{item.store}}</td>
<td align="left">
<span v-for="(items,indexs) in item.group"><input type="radio" name="group" :value="items.group_id" :id="'group'+items.group_id"><label :for="'group'+items.group_id">{{items.group_name}}{{items.people_num}}人[{{items.manager}}]</label></span>
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:"#app",
data:{
res:[
{
"area":"唐山地區",
"area_id":"10",
"store":"鳳凰園店",
"store_id":"11",
"nature":"1",
"group":[
{
"group_name":"B組",
"manager":"李凱旋",
"people_num":"18",
"group_id":"120"
},
{
"group_name":"C組",
"manager":"靳國強",
"people_num":"10",
"group_id":"121"
},
{
"group_name":"E組",
"manager":"張少龍",
"people_num":"7",
"group_id":"122"
}
]
},
{
"area":"唐山地區",
"area_id":"20",
"store":"天元駿景店",
"store_id":"21",
"nature":"1",
"group":[
{
"group_id":"123",
"group_name":"A組",
"manager":"劉海生",
"people_num":"16"
},
{
"group_id":"124",
"group_name":"C組",
"manager":"殷志豪",
"people_num":"11"
},
{
"group_id":"125",
"group_name":"D組",
"manager":"張碩",
"people_num":"5"
}
]
}
]
}
});
</script>
</body>
</html>
具體方法可以參考：http://blog.csdn.net/xiongmaodeguju/article/details/78526594###;