vuejs 2与SVG

Question

问题：我想使用3个不同的范围来调整SVG三角形并获得用户输入的颜色

这是代码笔链接：elementsEqual

＆＃13;

＆＃13;

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(){
        
    }
  },
  

＆＃13;

＆＃13;

＆＃13;

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