我正在尝试将 svg 路径中的各个坐标绑定(bind)到 vue.js 中的 data()
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<g>
<path v-for="n in 50" d="'M0 ' + (n*10) + ' L500 ' + (n*10)" fill="white" stroke="lightgray" />
<path v-for="n in 50" d="{'M0 ' + (n*10) + ' L500 ' + (n*10)}" fill="white" stroke="lightgray" />
</g>
</svg>
另一种方法是调用一个有效的方法，
<path v-for="n in 400" :d="gridy(n)" fill="white" stroke="lightgray" />
gridy()方法
gridy(n) {
return "M0" + " " + (n * 10) + " L500 " + (n * 10)
},
我尝试在不调用方法的情况下执行此操作的方式是否不正确？
谢谢
最佳答案
您只需 bind SVG 的 d 属性如下所示:
<path v-for="n in 50" :d="'M0 ' + (n*10) + ' L500 ' + (n*10)" fill="white" stroke="lightgray" />
工作示例:
new Vue({el: '#app'})
Vue.config.devtools = false
Vue.config.productionTip = false<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c2a29391c6e7269726d6b" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.js"></script>
<main id="app">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<g>
<path v-for="n in 50" :d="'M0 ' + (n*10) + ' L500 ' + (n*10)" fill="white" stroke="lightgray" />
</g>
</svg>
</main>关于svg - vue svg 路径与 v-for，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52931810/