Bagaimana untuk menukar css dalam vuejs

Cara menukar css dalam vuejs: 1. Gunakan arahan "v-bind:class" atau "v-bind:style" untuk mengubah suai gaya css; 2. Tukar gaya css secara terus dengan mengendalikan dom .

Persekitaran pengendalian artikel ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Bagaimana untuk menukar css dalam vuejs?

Penjelasan terperinci tentang cara mengendalikan (mengubah suai) css dalam Vue.js

Gunakan v-bind:class atau v-bind:style atau terus melalui Kendalikan dom untuk menukar gayanya;

1.v-bind:class ||. Kelas dan gaya adalah parameter, dan penunjuk selepas kelas dipanggil 'nilai jangkaan arahan' dalam dokumentasi rasmi vue (tidak perlu pergi ke ini, bagaimanapun, saya fikir ia berguna untuk pemula untuk mengetahui namanya) . Sama seperti v- Seperti kebanyakan arahan bind (kecuali beberapa arahan khas seperti V-for), sebagai tambahan kepada pembolehubah jenis rentetan mengikat, ia juga menyokong ungkapan js tunggal, iaitu, nilai jangkaan v- bind:class' arahan 'Selain rentetan, ia juga boleh menjadi objek atau tatasusunan (v-bind dalam 'v-bind:' boleh diabaikan).

1.1: Sintaks objek:

Ikat v-bind melalui objek: class="{'css class name': kawal sama ada untuk memaparkan (benar atau palsu)}"

Jika paparan adalah benar, maka kelas bahagian ini ialah

Dengan menetapkan nilai paparan, anda boleh mengawal paparan paparan warna

<template>
 <p>
 <p class=&#39;mycolor&#39; :class="{&#39;colordisplay&#39;:display}"><span>1.1我的对象更改&&绑定test</span></p>
 </p>
</template>
<script>
 export default {
 name: &#39;mytest&#39;,
 data() {
 return {
 display: true
 }
 },
 mounted() {},
 computed: {},
 methods:{}
 }
</script>
<style>
 .colordisplay {
 display: inline;
 background: red;
 border: 1px solid blue
 }
</style>

Jika anda ingin menetapkan dan mengikat berbilang kelas, ia adalah sama seperti biasa Pasangan nilai kunci objek boleh dipisahkan dengan koma class="mycolor colordisplay",

1.2: Gaya sebaris: v-bind:class="{'colordisplay':display,'ispay':pay}"

templatv-bind:style='mycolor'

data

<p :style=&#39;mypagestyle&#39;><span>1.2我的样式内联更改&&绑定test</span></p>

1.3: Sintaks tatasusunan:

mypagestyle:{color: 'yellow',background:"blue"},

juga boleh diikat melalui tatasusunan

v-bind:style='[mycolor1,mycolor2]' dan kemudian tetapkan yang dikembalikan data kepada

<p :style="[myarr,myarrtest]"><span>1.3我的数组更改&&绑定test</span></p>

2. Atribut yang dikira

myarr:{color: 'white'},
myarrtest:{background:'#000',display:'inline'},

juga boleh dikira melalui gaya yang dikira (sesuai untuk pertimbangan yang lebih kompleks)

Nilai pulangan atribut digunakan sebagai nama kelas, dan paparan gaya dikawal dengan menilai nilai serd dan slaid

<p class=&#39;computed&#39; :class=&#39;compuretu&#39;>2.计算属性判断</p>

Tetapkan gaya

 data() {
 return {serd:true,slid:true}
 }, 
 computed: {
 compuretu: function() {
 return {compuretu: this.serd && this.slid}
 }
 }

.compuretu{color:white;background: red}3 Manipulasi nod

Memandangkan vue itu sendiri ialah dom maya, jika anda menukar gaya nod melalui dokumen, ralat 'gaya' bukan definde mungkin berlaku,

ini Penyelesaian kepada masalah memerlukan tahap pemahaman yang lebih tinggi tentang Vue Ia boleh menukar gayanya dengan menggunakan ref dan $refs dalam fungsi dipasang berkala Vue itu sendiri untuk mendapatkan gaya: yang. contoh adalah seperti berikut:

Penjelasan:

<template>
<p>
<p style=“color: green;” ref="abc"><span>我的test</span></p>
</p>
</template>
<script>
export default {
name: &#39;mytest&#39;,
data() {
return {}
},
mounted() {console.log(this.$refs.abc.style.cssText)}
}
<script>
<style>
</style>

1.ref digunakan untuk mendaftarkan maklumat rujukan bagi elemen (subkomponen); objek yang memegang Semua sub-komponen (atau elemen HTML) yang telah mendaftarkan rujukan;

di atas Akan mengeluarkan semua kandungan gaya (warna: hijau;)

Dengan cara ini, jika anda menukarnya, anda boleh terus menukar atribut yang sepadan (

)

Sudah tentu, yang terakhir Kaedah ini mungkin agak sukar difahami untuk pemula, jadi saya syorkan anda menggunakan beberapa kaedah pertama

Pembelajaran yang disyorkan: "

tutorial vue this.$refs.abc.style.color=red"

Atas ialah kandungan terperinci Bagaimana untuk menukar css dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!