帶有SVG的vuejs 2

Question

問題：我想使用3個不同的范圍來調整SVG三角形並獲得用戶輸入的顏色

這是密碼筆鏈接： https : //codepen.io/ookangzheng/pen/MoEgME?editors=1011

 var getColor = document.getElementById("#inputColor").value; new Vue({ el: '#drawing', data: { color:"red", a: 50, b: 95, c: 5, }, methods:{ update: function(inputColor){ //getColor.value="blue"; this.color = inputColor; console.log("update pressed + inputColor"); return this.a, this.b, this.c; }, changeColor(){ } }, 

Answer 1

我想這應該為您解決問題：

<div id="drawing">
    <input v-model="a" type="range" /> A: {{a}} <br>
    <input v-model="b" type="range" /> B: {{b}}<br>
    <input v-model="c" type="range" /> C: {{c}}<br>
    <input type="text" v-model="color" id="inputColor"/>
    <svg class="svg-triangle" width='100' height='100'>
    <path :d="result" v-bind:class="color"/>
  </svg>
    <p>
        <ul>
            <li>red</li>
            <li>blue</li>
            <li>green</li>
        </ul>
    </p>
    <button v-on:click="update">update</button>
  </div>

您的javascript代碼可以簡化為：

new Vue({
  el: '#drawing',
  data: {
    color:"red",
    a: 50,
    b: 95,
    c: 5,
    result: ''
  },
  methods:{
    update: function(){
        this.result = `M ${a}, 6 ${b}, 97.5 ${c}, 97.5 z`
    }
  }   
})

檢查小提琴： https ://jsbin.com/mevehipoce/edit ? html,js,output