MyTetra Share
Делитесь знаниями!
Управление классами и стилями в Vue
Время создания: 28.01.2018 14:42
Автор: br0ke
Текстовые метки: javascript, js, vue.js, vuejs, vue, class, style, css, background-color
Раздел: Информационные технологии - JavaScript - Vue
Запись: and-semakin/mytetra_data/master/base/1517132528v0v1n20rxi/text.html на raw.githubusercontent.com

В Vue.js классами можно управлять при помощи директивы v-bind:class или просто :class. Директива умеет обрабатывать следующие варианты:

  1. название класса -- этот класс будет применен к элементу;
  2. объект, где ключом будет имя класса, а значением условие, при котором класс должен быть применен к элементу;
  3. список с названиями классов или объектами (можно и вперемешку).


Пример:

<script src="https://unpkg.com/vue/dist/vue.js"></script>


<div id="app">

<div

class="demo"

@click="attachRed = !attachRed"

:class="divClasses"></div>

<div class="demo" :class="{red: attachRed}"></div>

<div class="demo" :class="[color, {red: attachRed}]"></div>

<hr>

<input type="text" v-model="color">

</div>


new Vue({

el: '#app',

data: {

attachRed: false,

color: 'green'

},

computed: {

divClasses: function() {

return {

red: this.attachRed,

blue: !this.attachRed

};

}

}

});


Стилями в Vue.js можно управлять при помощи директивы v-bind:style или просто :style. Директива умеет обрабатывать следующие входные данные:

  1. объект, где ключом будет название CSS-свойства (можно писать без кавычек, если свойство не содержит дефисов, а если содержит, то в кавычках или в camelCase, например, backgroundColor);
  2. список таких объектов.


Пример:

<script src="https://unpkg.com/vue/dist/vue.js"></script>


<div id="app">

<div class="demo" :style="{backgroundColor: color}"></div>

<div class="demo" :style="myStyle"></div>

<div class="demo" :style="[myStyle, {height: width + 'px'}]"></div>

<hr>

<input type="text" v-model="color">

<input type="text" v-model="width">

</div>


new Vue({

el: '#app',

data: {

color: 'gray',

width: 100

},

computed: {

myStyle: function() {

return {

backgroundColor: this.color,

width: this.width + 'px'

};

}

}

});



Так же в этом разделе:
 
MyTetra Share v.0.59
Яндекс индекс цитирования