Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang cara v-bind secara dinamik mengikat atribut kelas

Penjelasan terperinci tentang cara v-bind secara dinamik mengikat atribut kelas

青灯夜游ke hadapan: 2022-08-10 14:05:552800semak imbas

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>

Penjelasan terperinci tentang cara v-bind secara dinamik mengikat atribut kelas Apabila

atau

berubah, senarai kelas akan dikemas kini dengan sewajarnya. Contohnya, jika nilai v-bind:class ialah

, senarai kelas akan menjadi "

<div
  class="static"
  v-bind:class="{ active: isActive, &#39;text-danger&#39;: hasError }"
></div>

data: {
  isActive: true,
  hasError: true
}

Penjelasan terperinci tentang cara v-bind secara dinamik mengikat atribut kelas

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
}

Penjelasan terperinci tentang cara v-bind secara dinamik mengikat atribut kelas

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>

Penjelasan terperinci tentang cara v-bind secara dinamik mengikat atribut kelas 4 Jika objek dalam kelas lebih kompleks, ia boleh diletakkan terus dalam kaedah, dan kemudian panggil fungsi ini untuk mencapai penukaran dinamik

<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>

Penjelasan terperinci tentang cara v-bind secara dinamik mengikat atribut kelas

2 atribut kelas ikatan dinamik v-bind (sintaks tatasusunan)

Kami. boleh menghantar tatasusunan kepada

<!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: &#39;#app&#39;,
		data: {
			message: &#39;你好啊&#39;,
			active:&#39;active&#39;,
			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>

, untuk menggunakan senarai kelas

Penjelasan terperinci tentang cara v-bind secara dinamik mengikat atribut kelas 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

Nota: Seperti sintaks objek, ia boleh wujud pada masa yang sama dengan kelas biasa tanpa konflik

:class="[base1,base2]"

Contoh:
' '

Jika anda juga ingin menukar kelas dalam senarai berdasarkan syarat, anda boleh gunakan tiga ungkapan Meta:

<h2 class="title" :class="[&#39;active&#39;,&#39;line&#39;]">{{message}}</h2>

Penjelasan terperinci tentang cara v-bind secara dinamik mengikat atribut kelas Ditulis seperti ini, errorClass akan sentiasa ditambah, tetapi activeClass hanya akan ditambah apabila isActive benar.

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="[&#39;active&#39;,&#39;line&#39;]">{{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: &#39;#app&#39;,
            data: {
                message: &#39;你好啊&#39;,
                active:&#39;active&#39;,
                line:&#39;bbbbbbbbbb&#39;
            },
            methods:{
                getClasses: function () {
                    return [this.active,this.line]
                }
            },
            computed: {
                classes: function () {
                    return [this.active,this.line]
                }
            }
            
        })

    </script>
</body>
</html>

Contoh: Penjelasan terperinci tentang cara v-bind secara dinamik mengikat atribut kelas

<div v-bind:class="[isActive ? activeClass : &#39;&#39;, 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!

Kenyataan：

Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Contoh untuk menyelesaikan ralat yang berlaku apabila menggunakan lang="scss" dalam vueArtikel seterusnya：Contoh untuk menyelesaikan ralat yang berlaku apabila menggunakan lang="scss" dalam vue

Artikel berkaitan

Lihat lagi