Примените класс, используя условие VueJS - PullRequest
Новая
       44

Примените класс, используя условие VueJS

1 голос
/ 22 марта 2020

Я пытаюсь применить class к тегу <p>, используя условие VueJS, но оно не работает вообще, несмотря на то, что работает на JSfiddle. Прошло уже 3 дня, как я застрял, пожалуйста, помогите мне.

VueJS (в основном. js) 

new Vue({
  el: "#test",
  data: {
    selected: "2"
  }
});

HTML (приложение. vue ) 

<div id="app">
  <div id="test">
    {{ selected }}
    <p :class="{ selection: 1 === selected }">
      heyyy 1
    </p>
    <p :class="{ selection: 2 == selected }">
      heyyy 2
    </p>
    <button @click="selected = 2">Switch</button>
  </div>
</div>

Ответы [ 2 ]

1 голос
/ 22 марта 2020

Я предполагаю, что вы используете Vue -CLI, поскольку у вас есть файл .vue, но ваш main.js использует синтаксис из Vue CDN. Возможно, вместо этого вы скопировали код из скрипки.

Я также предположу, что у вас есть класс CSS с именем .selection, чтобы это работало.

В любом случае, App.vue имеет собственный экземпляр компонента, который не * экземпляр монтирования main.js (он на один уровень глубже). Ваш код создает selected в монтировании root вместо App.vue.

Чтобы исправить, создайте его в разделе App.vue <script> вместо: 

<template>
<div id="app">
  <div id="test">
    {{ selected }}
    <p :class="{ selection: 1 === selected }">
      heyyy 1
    </p>
    <p :class="{ selection: 2 == selected }">
      heyyy 2
    </p>
    <button @click="selected = 2">Switch</button>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      selected: "2"
    }
  }
}
</script>

<style>
.selection {
  /* CSS */
}
</style>
0 голосов
/ 22 марта 2020

для применения привязки класса в VueJs вы можете использовать его как:

:class="{ 'selection(your class name here)': selected === 1}"

...