Bagaimanakah v-bind mengikat atribut kelas secara dinamik? Artikel ini akan memberi anda pemahaman terperinci tentang pelbagai sintaks arahan v-bind untuk mengikat atribut kelas secara dinamik. Saya harap ia akan membantu anda!
v-bind boleh menetapkan atribut kelas secara dinamik untuk melaksanakan gaya dinamik. Kaedah penulisan:
<!--完整写法--> <标签名 v-bind:class="vue实例中的数据属性名"/> <!--简化写法--> <标签名 :class="vue实例中的数据属性名"/>
1. v-bind secara dinamik mengikat atribut kelas (sintaks objek)
Selepas mengikat atribut kelas secara dinamik , Nilai kelas ialah pembolehubah, yang boleh diletakkan dalam data untuk mengikat gaya secara dinamik untuk menukar kelas secara dinamik. (Belajar perkongsian video: tutorial video vue)
1 Ikat satu atau lebih kelas terus melalui {}
v-blid:class Objek. boleh dihantar sebagai atribut. Objek termasuk set pasangan nilai kunci
:class= "{key1：value1，key2：value2...}" Nama kelas ialah gaya yang sepadan, iaitu, nilai yang sepadan dengan menambah dan mengalih keluar Kelas, nilainya ialah true dan false
Jika nilainya ialah true, gaya kunci akan berfungsi
Jika nilainya ialah false, gaya kekunci tidak akan berfungsi juga. digunakan dengan biasa Atribut kelas wujud bersama.
<!-- 样式 -->
<style>
.color {
color: red;
}
.background {
background-color: pink;
}
</style><div id="app">
<h2 class="color">{{message}}</h2>
<!-- 第一种：直接用style中的样式，固定写死； -->
<h2 v-bind:class="color">{{message}}</h2>
<!-- 第二种：用指令v-bind,class的属性值color为变量； -->
<!-- vue解析，变量对应data中color属性值，则用了color的样式； -->
<h2 v-bind:class="{color:isColor, background:isBackground}">{{message}}</h2>
<!-- 第三种：用指令v-bind；后面接对象{key1：value1，key2：value2} -->
<!-- isColor为false则color样式不起作用。 -->
<!-- isBackground为true则background样式起作用。 -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
color:"color",
isColor:false,
isBackground:true
}
})
</script>
berubah, senarai kelas akan dikemas kini dengan sewajarnya. Contohnya, jika nilai v-bind:class ialah
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>data: {
isActive: true,
hasError: true
}isActivehasError2. Objek data terikat tidak perlu ditakrifkan sebaris dalam templat, tetapi boleh diikat pada objek kelas classObjecthasError false static active
data: {
isActive: true,
hasError: false
}3 Anda juga boleh mengikat sifat terkira objek yang dikembalikan
<!-- 样式 -->
<style>
.color {
color: red;
}
.background {
background-color: pink;
}
</style><div id="app">
<h2 v-bind:class="classObject">{{message}}</h2>
<!-- 如下：绑定到一个类对象classObject，对象中设置多个key:value对 -->
<!-- color为true则color样式起作用。 -->
<!-- background为false则background样式不起作用。 -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
classObject: {
color: true,
background: false
}
}
})
</script>
<div id="app">
<h2 v-bind:class="classObject">{{message}}</h2>
<!-- 如下：绑定到一个类对象classObject，对象中设置多个key:value对 -->
<!-- color为true则color样式起作用。 -->
<!-- background为false则background样式不起作用。 -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
isColor: true,
isBackground: true
},
computed: {
classObject: function () {
return {
color: this.isColor,
background: this.isBackground
}
}
}
})
</script>
2 atribut kelas ikatan dinamik v-bind (sintaks tatasusunan)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
.active{
background-color: pink;
}
.line{
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="getClasses()">方法methods：{{message}}</h2>
<h2 :class="classes">计算属性computed：{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active:'active',
isAcitve:true,
isLine:true
},
methods:{
btnClick: function () {
this.isAcitve = !this.isAcitve
},getClasses:function () {
return {active:this.isAcitve,line:this.isLine}
}
},
computed: {
classes: function () {
return {active:this.isAcitve,line:this.isLine}
}
}
})
</script>
</body>
</html>
format sintaks tatasusunan ialah:
v-bind sintaks tatasusunan kelas mengikat adalah untuk lulus terus dalam tatasusunan , tetapi di dalam tatasusunan Mereka semua adalah nama kelas Nama kelas dalam tatasusunan akan ditambahkan pada label pada halaman. Gaya diubah dengan menambah atau menolak elemen dalam tatasusunan. Nota: Nama kelas di sini perlu dibalut dengan
Jika tidak dibalut, Vue akan menganggapnya sebagai atribut dalam data dan mencarinya dalam data Jelas sekali tidak ada atribut di dalamnya, jadi ralat akan datang. Ini adalah perkara biasa dalam Vue. Tanpa tanda petikan, ia dianggap sebagai atribut dalam data:class
:class="[base1,base2]"
Contoh:Jika anda juga ingin menukar kelas dalam senarai berdasarkan syarat, anda boleh gunakan tiga ungkapan Meta:
' '
<h2 class="title" :class="['active','line']">{{message}}</h2>
Namun, menulis dengan cara ini agak menyusahkan apabila terdapat beberapa kelas bersyarat. Jadi sintaks objek juga boleh digunakan dalam sintaks tatasusunan:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/vue.js"></script>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="['active','line']">{{message}}</h2>
<h2 :class="[active,line]">{{message}}</h2>
<h2 :class="[active,line]">{{message}}</h2>
<h2 :class="getClasses()">方法methods：{{message}}</h2>
<h2 :class="classes">计算属性computed：{{message}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active:'active',
line:'bbbbbbbbbb'
},
methods:{
getClasses: function () {
return [this.active,this.line]
}
},
computed: {
classes: function () {
return [this.active,this.line]
}
}
})
</script>
</body>
</html> Contoh:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
(Perkongsian video pembelajaran:
depan web -end Development,
Video Pengaturcaraan Asas
<div v-bind:class="[{ active: isActive }, errorClass]"></div>Atas ialah kandungan terperinci Penjelasan terperinci tentang cara v-bind secara dinamik mengikat atribut kelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
