我想更改復選框值的顏色，例如是否選中它顯示綠色文本如果未選中它顯示紅色這里是簡單輸入型別
但如果有人知道，我不確定如何為這些真值和假值著色，請幫忙，謝謝！PS如果這有助于人們理解我的問題，我現在已經放置了整個代碼。
<label>Other Information:</label>
<textarea v-model="student.otherInformation"></textarea> <br /><br />
<input type="checkbox" v-model="student.agree" true-value="I want to receive promotions"
false-value="I Don't want to receive promotions">
<span>Agree receive our promotions.</span><br><br>
<button type="submit" >Add a new student</button>
</form>
uj5u.com熱心網友回復：
您可以系結樣式：
new Vue({
el: '#demo',
data() {
return {
student: {name: "", gender: "male", age: 0, country: "", hobby: [], otherInformation: "", agree: ""},
students: [{name: "Mike", gender: "male", age: 23,country: "ZM", hobby: ["Studying"], otherInformation: "I want say nothing but try your best.", agree: "I Don't want to receive promotions"}, {name: "Emma", gender: "famale", age: 18, country: "PK", hobby: ["Playing Game",
"Travelling"], otherInformation: "Please contact me anytime.", agree: "I want to receive promotions"}, {name: "Emily", gender: "famale", age: 20, country: "BD", hobby: ["Studying", "Eating", "Travelling"], otherInformation: "Tell me your problem.", agree: "I Don't want to receive promotions"}],
countries: [{name: "China", abr: "CN"}, {name: "Zambia", abr: "ZM"}, {name: "Bangladesh", abr: "BD"}, {name: "India", abr: "IN"}, {name: "Pakistan", abr: "PK"}],
hobbies: ["Studying", "Playing Game", "Eating", "Travelling"]
}
},
methods: {
addStudent() {
this.students.push(this.student)
},
removeTask: function(index) {
this.students.splice(index, 1);
},
handleHobbies(hobby) {
this.student.hobby.includes(hobby) ? this.student.hobby = this.student.hobby.filter(h => h !== hobby) : this.student.hobby.push(hobby)
},
// ?? method for selecting style
colorIt(i) {
return this.students[i].agree === 'I want to receive promotions' ? 'color: green' : 'color: red'
},
},
}).true-value {
color: Green;
}
.false-value {
color: Red;
}
.btn-danger {
background-color: transparent;
border: 1px solid #3498db;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<h3>Student Information Collection</h3><hr>
<form class="basic-grey" @submit.prevent="addStudent">
<div class=" form-group">
<label for="name">Student Name:</label>
<input id="name" type="text" required v-model="student.name">
</div>
<label>Gender:</label >
Male<input type="radio" v-model="student.gender" value="male" >
Female<input type="radio" v-model="student.gender" value="female"><br />
<label for="age">Age:</label>
<input id="age" type="number" v-model="student.age"> <br />
<label>Country:</label>
<select v-model="student.country">
<option disabled selected value="">Please select your country</option>
<option v-for="(country, i) in countries" :key="i" :value="country.abr">
{{country.name}}
</option>
</select>
<label>Hobby:</label>
<span v-for="(hobby, idx) in hobbies" :key="idx">
<input type="checkbox" @change="handleHobbies(hobby)" value="Studying">{{ hobby }}
</span><br />
<label>Other Information:</label>
<textarea v-model="student.otherInformation"></textarea> <br />
<input type="checkbox" v-model="student.agree" true-value="I want to receive promotions"
false-value="I Don't want to receive promotions">
<span>Agree receive our promotions.</span><br>
<button type="submit" class="button" >Add a new student</button>
</form>
{{student}}
<h3>Students list</h3><hr>
<table id="rounded-corner">
<thead>
<th class="rounded-company">Name</th>
<th>Gender</th>
<th>Age</th>
<th>Country</th>
<th>Hobby</th>
<th>Receive Promotions</th>
<th class="rounded-q4">Operation</th>
</thead>
<tbody>
<tr v-for="(student, index) in students" :key="index">
<td>{{student.name}}</td>
<td>{{student.gender}}</td>
<td>{{student.age}}</td>
<td>{{student.country}}</td>
<td>{{student.hobby}}</td>
<!-- ?? bind style and call method -->
<td :style="colorIt(index)">{{student.agree}}</td>
<td><button type="button" class="btn-danger" @click="removeTask(index)">Delete</button></td>
</tr>
</tbody>
</table>
</div>uj5u.com熱心網友回復：
首先將文本放入語意 HTML 中，如標簽，然后將下面的代碼定位到選中的輸入并取消選中
input[type="checkbox"] * { color: red !important; } input[type="checkbox"]:checked * { color: green !important; }
uj5u.com熱心網友回復：
<style>
input:checked {
colour: green;
background-color: green;
}
input {
colour: red;
background-color: red;
}
</style>uj5u.com熱心網友回復：
我不知道vue，但你可以用純html和css來做
<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #F00;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #00FF00;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>
<h1>Custom Checkboxes</h1>
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/476123.html