質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

1237閲覧

Vue.jsでclassのトグルをしてもスタイルが適用されない

Maar

総合スコア48

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2021/08/25 01:36

編集2021/08/25 03:33

現在vueを勉強中なのですが、classをトグルして文字のスタイルを変化させようとしても何故か変わりません。classにはselectedがちゃんと入っているのに.vueファイル内のspan.selectedのスタイルが適用されていないようです。
vue特有の記述方法があるのでしょうか、ちなみに通常のcssファイルに書いたところ問題なく適用されていたのでcssの書き方は間違ってなさそうです。

.vueファイル

vue

1<template> 2 <div class="wrap"> 3       <span :class="{ selected: name }" @click="toggleSelect">{{name}}</span> 4 </div> 5</template> 6 7<script> 8export default { 9 methods: { 10    toggleSelect(){ 11    this.name = !this.name 12   } 13 }, 14}; 15</script> 16 17<style lang="scss" module> 18.wrap { 19 > span { 20 font-size: 10px; 21 } 22 > span.selected { 23 font-size: 100px; 24 } 25} 26</style>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Vueのstyleにmodule属性を足す場合はCSS Moduleに則った記法を使用してください

https://vue-loader-v14.vuejs.org/ja/features/css-modules.html

scopedもしくは通常のstyle(今の書き方)を使用するならば、module属性を外してください。

投稿2021/08/25 05:29

編集2021/08/25 07:18
k4a

総合スコア983

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Maar

2021/08/25 07:05 編集

ありがとうございます、CSS Moduleに則った場合はどのように変更することで実現できますでしょうか
Maar

2021/08/25 08:36

自己解決しました。 大変勉強になりました、ありがとうございます! またよろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問