Rumah > hujung hadapan web > View.js > Penjelasan terperinci tentang cara v-bind secara dinamik mengikat atribut gaya

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

青灯夜游
Lepaskan: 2022-08-10 11:27:06
ke hadapan
2818 orang telah melayarinya

Bagaimanakah v-bind mengikat atribut gaya secara dinamik? Artikel ini akan memberi anda pemahaman terperinci tentang pelbagai sintaks arahan v-bind untuk mengikat atribut gaya secara dinamik. Saya harap ia akan membantu anda!

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

v-bind boleh secara dinamik menetapkan atribut gaya untuk mengikat gaya sebaris. Kaedah penulisan:

<!--完整写法-->
<标签名 v-bind:style="vue实例中的数据属性名"/>

<!--简化写法-->
<标签名 :style="vue实例中的数据属性名"/>
Salin selepas log masuk

1. v-bind secara dinamik mengikat atribut gaya sebaris (sintaks objek)

mengikat atribut kelas secara dinamik Selepas itu, nilai kelas ialah pembolehubah, yang boleh diletakkan dalam data untuk mengikat gaya secara dinamik. (Belajar perkongsian video: tutorial video vue)

1 Sintaks objek v-bind:style sangat serupa dengan sintaks CSS, tetapi ia sebenarnya objek JavaScript<. 🎜>

:style="{key(属性名):value(属性值)}"
Salin selepas log masuk

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

Apabila menulis nama sifat CSS, seperti saiz fon


  • boleh digunakan CamelCase:

    fontSize

  • atau dash-delimited (kebab-case, ingat untuk melampirkannya dalam petikan tunggal):

    &#39;font-size&#39;

<h2 :style="{fontSize:&#39;50px&#39;}">{{message}}</h2>
<h2 :style="{&#39;font-size&#39;:&#39;50px&#39;}">{{message}}</h2>
Salin selepas log masuk
Nota: Jika anda tidak menggunakan penamaan kes unta, anda mesti menambah petikan tunggal, kerana sebaik sahaja sintaks vue terikat, ia akan menganggap rentetan tanpa petikan tunggal sebagai nama pembolehubah, walaupun 50px akan juga dianggap sebagai nama pembolehubah, jadi jika ia adalah rentetan, petikan tunggal mesti ditambah.

nilai (nilai atribut) mempunyai dua pelaksanaan: dibalut dengan petikan atau tidak dibalut dengan petikan

  • Apabila nilai disebut, apabila Vue sedang menghuraikan, Rawat ia sebagai nilai tetap. Contohnya, apabila nilai "

    "50px

  • dalam contoh di atas tidak disertakan dalam petikan berganda, ia dianggap sebagai pembolehubah dan Vue menghuraikannya menjadi pembolehubah nilai pembolehubah akan ditemui dalam data

<div id="app">
	<!-- 如下:finalSize当成一个固定值来使用 -->
	<h2 :style="{fontSize:&#39;50px&#39;}">{{message}}</h2> 
	
	<!-- 如下:finalSize当成一个变量来使用,通过data动态绑定 -->
	<h2 :style="{fontSize: finalSize + &#39;px&#39;, backgroundColor: finalColor }">{{message}}</h2>
</div>
Salin selepas log masuk
<script>
const app = new Vue({
    el: "#app",
    data: {
        message: &#39;你好啊!&#39;,
        finalSize: 100,
        finalColor: &#39;red&#39;
    }
})
</script>
Salin selepas log masuk

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

2. Biasanya lebih baik untuk mengikat terus ke objek gaya , yang menjadikan templat lebih jelas:

<div id="app">
	<!-- 如下:绑定到一个样式对象styleObject,对象中设置对个key:value对 -->
	<h2 :style="styleObject">{{message}}</h2>
</div>
Salin selepas log masuk
<script>
const app = new Vue({
    el: "#app",
	data: {
		message: &#39;你好啊!&#39;,
	        styleObject: {
			color: &#39;red&#39;,
			fontSize: &#39;50px&#39;,
			backgroundColor: &#39;pink&#39;
		}
	}
})
</script>
Salin selepas log masuk

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

3 Anda juga boleh mengikat sifat terkira objek yang dikembalikan

<div id="app">
	<!-- 如下:绑定一个返回对象的计算属性 -->
	<h2 :style="styleObject">{{message}}</h2>
</div>
Salin selepas log masuk
<script>
const app = new Vue({
    el: "#app",
	data: {
		message: &#39;你好啊!&#39;,
		color: &#39;red&#39;,
		fontSize: &#39;50px&#39;
	},
	computed: {
	  styleObject: function () {
		return {
		  color:this.color, fontSize:this.fontSize
		}
	  }
	}

})
</script>
Salin selepas log masuk

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

Sintaks objek sering digunakan bersama-sama dengan sifat dikira objek yang dikembalikan untuk melaksanakan penukaran gaya

Contoh: bertukar antara warna merah dan hitam

<div id="app">
	<span :style="styleObj" @click="handleFontColor">Hello World</span>
</div>
Salin selepas log masuk
<script>
	var vm = new Vue({
		el: &#39;#app&#39;,
		data: {
			styleObj: {
				color: &#39;red&#39;
			}
		},
		methods: {
			handleFontColor(){
				this.styleObj.color === &#39;red&#39; ? this.styleObj.color = &#39;black&#39; : this.styleObj.color = &#39;red&#39;
			}
		}
	})
</script>
Salin selepas log masuk

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

2 v-bind secara dinamik mengikat atribut gaya sebaris (sintaks tatasusunan)

penggunaan v-bind Kaedah tatasusunan gaya ikatan dinamik jarang digunakan Penggunaannya adalah seperti berikut: mula-mula tulis gaya yang akan digunakan dalam bahagian data contoh vue, dan kemudian gunakan pengikatan tatasusunan di mana. pengikatan dinamik v-bind akan digunakan Tatasusunan termasuk yang ditakrifkan dalam nama gaya yang baik.

Format sintaks tatasusunan ialah:

:style="[base1,base2]"
Salin selepas log masuk

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

Sintaks tatasusunan v-bind:style boleh menggunakan berbilang objek gaya pada elemen yang sama:

<div id="app">
	<h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
</div>
Salin selepas log masuk
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: &#39;你好啊!&#39;,
            baseStyle: { backgroundColor: &#39;red&#39; },
            baseStyle1: { fontSize: &#39;100px&#39; },
        }
    })
</script>
Salin selepas log masuk

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

Tambah awalan secara automatik: Apabila v-bind:style digunakan, anda perlu menambah

awalan enjin penyemak imbas kepada atribut CSS Apabila, seperti mengubah, Vue.js akan mengesan dan menambah awalan yang sepadan secara automatik.

3. v-bind secara dinamik mengikat atribut gaya sebaris (berbilang nilai)

boleh terikat kepada gaya atribut yang ditentukan menyediakan tatasusunan yang mengandungi berbilang nilai, yang sering digunakan untuk menyediakan berbilang nilai awalan

<div :style="{ display: [&#39;-webkit-box&#39;, &#39;-ms-flexbox&#39;, &#39;flex&#39;] }"></div>
Salin selepas log masuk
Menulis dengan cara ini hanya akan menghasilkan nilai terakhir dalam tatasusunan yang disokong oleh penyemak imbas.

Dalam contoh ini, jika penyemak imbas menyokong flexbox tanpa awalan penyemak imbas, maka hanya

akan dipaparkan. display: flex

(Mempelajari perkongsian video:

pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara v-bind secara dinamik mengikat atribut gaya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:csdn.net
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan