使用scale等比例缩放图片

功能需求：
在下拉框中选择你所需要缩放的比例，
选择好了之后，图片会按照你选择的比例进行缩放

1==》如何获取select中option选中的值
在select添加事件change 和双向绑定v-model

<select @change="changeValue" v-model="myVal">
<option value="1">1:1</option>
<option value="1.5">1:1.5</option>
</select>

data中 myVal:"1"

ps==>当myVal为1时，option显示1:1，当myVal为1。5时，option显示1:5，

所以说明了 select中的v-model(value)值是1时，就会自动显示option中对应的值。

console.log(this.myVal)

2==》找到控制图片的节点，使用scale进行动态绑定
let ele=document.getElementById("img")
ele.style.transform="scale(1)";

 

  <div id="app">
      <select @change="changeValue" v-model="myVal">
        <option value="1">1:1</option>    
        <option value="1.5">1:1.5</option>
      </select>
      <br/>
      <br/>
     <img src="./01.jpg" id="img">
   </div>

 

  <script>
    new Vue({
      el: '#app',
        data() {
          return {
            myVal:"1",
            scaleSize:"",
               
                  
          };
        },

      methods: {        
       changeValue(){
           let ele=document.getElementById("img");//获取节点
           console.log(this.myVal)
           if(this.myVal=="1"){
               this.scaleSize=1;
               ele.style.transform="scale(1)";
           }else if(this.myVal=="1.5"){
               this.scaleSize=1.5;
               ele.style.transform="scale(1.5)";
           }
       }
      },
    
    })
  </script>