Cara menggunakan svg dalam vue

Langkah-langkah untuk menggunakan SVG dalam Vue adalah seperti berikut: Import SVG, anda boleh menggunakan tag <img> Ikat data pada sifat SVG menggunakan sistem reaktif Vue. Balas acara, tambahkan pendengar acara pada SVG untuk membalas klik, tuding dan banyak lagi. Pengurusan dan manipulasi SVG boleh dipermudahkan menggunakan perpustakaan pihak ketiga seperti vue-svgicon, vue-awesome dan svg-sprite-loader.

Cara menggunakan SVG dalam Vue

Menggunakan SVG (Grafik Vektor Boleh Skala) dalam Vue.js adalah sangat mudah. Begini cara untuk melakukannya:

1. Import SVG

Anda boleh mengimport SVG dalam salah satu daripada tiga cara:

• Gunakan teg <img>: <img> 标签： <img src="path-to-svg-file.svg" />
• 使用内联 SVG：将 SVG 内容直接放在 Vue 模板中： <svg><path ... /></svg>
• 使用组件：将 SVG 作为组件导入并使用： <component :is="svgComponent" /> ;img src="path-to-svg-file.svg" />

Gunakan SVG sebaris: Letakkan kandungan SVG terus dalam templat Vue: <svg>< .. /></svg>

Gunakan komponen:

<code class="vue"><template>
  <svg>
    <path :fill="fillColor" />
  </svg>
</template>

<script>
  export default {
    data() {
      return {
        fillColor: 'red'
      }
    }
  }
</script></code>

<code class="vue"><template>
  <svg @click="handleClick">
    <path />
  </svg>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        // 执行某项操作
      }
    }
  }
</script></code>

Atas ialah kandungan terperinci Cara menggunakan svg dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!