<!DOCTYPE?html>
<html?lang="en">
<head>
???<meta?charset="UTF-8">
???<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
???<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
???<title>Vue_component_oli</title>
???<script?src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
???<style>
???????*?{
???????????margin:?0;
???????????padding:?0;
???????}
???????ul?{
???????????list-style:?none;
???????}
???????.list_cards?ul?{
???????????display:?flex;
???????????flex-direction:?row;
???????}
???????.box?{
???????????width:?300px;
???????????height:?450px;
???????????border:?5px?solid?#ccc;
???????????border-radius:?10px;
???????????margin-left:?10px;
???????????overflow:?hidden;
???????}
???????.colors?{
???????????opacity:?0.5;
???????}
???????.box_div_box?{
???????????width:?100%;
???????????height:?70%;
???????????background-color:?aqua;
???????????text-align:?center;
???????????line-height:?315px;
???????}
???????.box_btn_box?input?{
???????????width:?30%;
???????????height:?50px;
???????????margin:?40px?10%?;
???????}
???</style>
</head>
<body>
???<div?id="list_cards"?class="list_cards">
???????<ul>
???????????<list-card?v-for="post?in?posts"?:id="post.id"?:title="post.title"?:class="{colors:?post.color}"></list-card>
???????</ul>
???</div>
???<script>
???????Vue.component('list-card',?{
???????????props:?[?'id','title',?'color'?],
???????????template:?'<li?class="box"><div?class="box_div_box"><!--img?src=""?/-->{{?title?}}</div><div?class="box_btn_box"><input?type="button"?value="詳情"?:disabled="color"?/><input?type="button"?value="購買"?:disabled="color"?/></div></li>',
???????});
???????let?vm?=?new?Vue({
???????????el:?'#list_cards',
???????????data:?{
???????????????posts:?[
???????????????????{?id:?'1',?title:?'card-1',?color:?true,?},
???????????????????{?id:?'2',?title:?'card-2',?color:?false,?},
???????????????????{?id:?'3',?title:?'card-3',?color:?true,?},
???????????????],
???????????},
???????});
???</script>
</body>
</html>為什么disabled沒有被賦上color的值？希望老師可以幫忙解答一下。
添加回答
舉報
0/150
提交
取消