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

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>

 

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>

使用scale等比例缩放图片_javascript

 

 

 

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。


作者：​​晚来南风晚相识​​​