使用 JavaScript 将 CSS 添加到 Vue答案

【问题标题】：Add CSS to Vue using JavaScript使用 JavaScript 将 CSS 添加到 Vue
【发布时间】：2021-11-11 10:48:42
【问题描述】：

我正在尝试为 Vue 上的 <label> 标签添加样式。

  <div class="grid grid-cols-1 mt-5 mx-7">
      <label class="uppercase md:text-sm text-xs text-gray-500 text-light font-semibold mb-1 flex items-center justify-center">Upload Photo</label>
        <div class='flex items-center justify-center w-full'>    
            <label  id="img1" class='flex flex-col border-4 border-dashed w-40 h-32 hover:bg-gray-100 hover:border-purple-300 group'>
                 <div @click="onPrimaryPicSelected" class='flex flex-col items-center justify-center pt-7'>
                  <svg class="w-10 h-10 text-purple-400 group-hover:text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                  <p class='lowercase text-sm text-gray-400 group-hover:text-purple-600 pt-1 tracking-wider'>Select a photo</p>
                </div>
              <input type='file' class="hidden" />
            </label>
        </div>
    </div>

我希望在调用 onPrimaryPicSelected 函数时向 <label> 标记添加 CSS 样式。如果可能，我该怎么做？

目前onPrimaryPIcSelected 只是获取上传的图片。

 onPrimaryPicSelected(event) {
      this.primaryPhoto = event.target.files[0];
      this.primaryPhotoUrl = URL.createObjectURL(event.target.files[0]);
    },

【问题讨论】：

在您的 Labeltag 中，您可以使用 Class-Binding 或 Style Binding。 vuejs.org/v2/guide/class-and-style.html。 :class="selected ? 'new-classes-here' 。 selected 是 boolean 类型的新 memberVar。在您的方法中，您可以从默认的 false 更改为 true。并且新的课程将适用于您的标签。

标签： javascript css vue.js vuejs3

【解决方案1】：

如果为 true，您可以使用布尔变量，它将您的样式应用于标签标签。

<div class="grid grid-cols-1 mt-5 mx-7">
  <label class="uppercase md:text-sm text-xs text-gray-500 text-light font-semibold mb-1 flex items-center justify-center" :style="selected ? 'your-style-here' : ''">Upload Photo</label>
    <div class='flex items-center justify-center w-full'>    
        <label  id="img1" class='flex flex-col border-4 border-dashed w-40 h-32 hover:bg-gray-100 hover:border-purple-300 group'>
             <div @click="onPrimaryPicSelected" class='flex flex-col items-center justify-center pt-7'>
              <svg class="w-10 h-10 text-purple-400 group-hover:text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
              <p class='lowercase text-sm text-gray-400 group-hover:text-purple-600 pt-1 tracking-wider'>Select a photo</p>
            </div>
          <input type='file' class="hidden" />
        </label>
    </div>
</div>

然后在你的函数中

onPrimaryPicSelected(event) {
  this.selected = true;
  this.primaryPhoto = event.target.files[0];
  this.primaryPhotoUrl = URL.createObjectURL(event.target.files[0]);
},

【讨论】：

这是正确的，但有一点改进。代替 :style 在标签标签内使用 :class。
嘿，很棒的解决方案，但我似乎无法在 :style 中使用 this.primaryPhoto。