功能需求:
在下拉框中选择你所需要缩放的比例,
选择好了之后,图片会按照你选择的比例进行缩放
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>