vuejs實現用watch實現onchange功能

標籤：變化   圖片   技術分享   class   val   defaults   com   blog   hang   

項目中要實現的效果如下：

要求隨著向左滑動實現圖片的旋轉效果，首先想到onchange事件，但是查看vue文檔沒有發現onchang命令，於是想到vue的watch鉤子來監聽滑動值的變化，從而調用組件的旋轉功能。

代碼如下：

 <input id="defaultSlider" v-model="rotateVal" type="range" min="0" max="30"/>

1.v-model="rotateVal"綁定值到data中。

 data() {      return {        id: ‘‘,        name: ‘‘,        coverPic: ‘‘,        iptList: [],        input: false,        image: false,        isEmpty: true,        requireList: ‘‘,        data: {data: {}, appid: api.appid, id: ‘‘},        inputs: {},        imgSrc: ‘‘,        cropImg: imgUrl,        crop: ‘‘,        cropper: false,        rotateVal: 0      }    },

2.watch監聽rotateVal

 watch: {      rotateVal: function (newVal, oldVal) {        this.rotate(oldVal)      }    },

3.由組件實現旋轉和裁剪

rotate (val) {        this.$refs.cropper.rotate(val);      },

 

vuejs實現用watch實現onchange功能