时间戳

首页 > 解决方案 > Vue.js 中的动态类绑定 SVG

vue.js - Vue.js 中的动态类绑定 SVG

问题描述

下面使用数组语法一次性绑定静态和动态类。静态有效，但动态无效。

动态类绑定如何与 SVG 一起工作？

https://codesandbox.io/s/dynamic-class-binding-svg-in-vue-js-jc5qg

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      .static {
        stroke: black;
        stroke-width: 1;
        fill: yellow;
      }

      .dynamic {
        fill: red;
      }
    </style>
  </head>
  <body>

    <svg id="app" width="100%" height="100%">
      <circle
        cx="50" cy="50" r="40"
        :class="[ 'static', dynamicToggle ? 'dynamic' : '' ]"
      />
    </svg>

    <button
      @click.prevent="dynamicToggle = ! dynamicToggle"
      >toggle color
    </button>

    <script type="text/javascript">
      new Vue({
        el: '#app',
        data: {
          dynamicToggle: false
        }
      })
    </script>
  </body>
</html>

标签： vue.jssvg

解决方案

button不在 vue 应用程序中。

您可以将其包装在另一个 div 中以解决此问题：

    <div id="app">
      <svg width="100%" height="100%">
        <circle
          cx="50"
          cy="50"
          r="40"
          :class="[ 'static', dynamicToggle ? 'dynamic' : '' ]"
        />
      </svg>
      <button @click.prevent="dynamicToggle = ! dynamicToggle">
        toggle color
      </button>
    </div>

推荐阅读