vuejs实现用watch实现onchange功能

时间：2017-04-10 00:14:25 收藏：0 阅读：4202

项目中要实现的效果如下：

技术分享

要求随着向左滑动实现图片的旋转效果，首先想到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);
      },