>问题描述
vue是一个学习曲线相对平缓的响应式框架，利用vue可以做到素材图片的动态裁剪、切换。
将本文要解决的问题抽象成基本原型进行描述：下图，为一个尺寸相对固定的素材图片，实现的目标是每次只实现一格图片，如下所示：
同时，还要做到页面的动态响应。
>解决思路
问题的难度就演变成了如何实现图片的“切片效果”以及动态响应。
切片问题还算简单，利用div+img，div套用overflow:hidden的style，然后内嵌的img做一个relative的偏移即可；而动态响应，则需要借助vue中关于内联样式的绑定和计算属性的相关特性。
>代码
HTML:
<html>
<head>
<script src="./vue.js"></script>
</head>
<!--div绑定内联样式对象-->
<div id='card1' :style="divsize">
<!--img绑定内联样式的计算属性-->
<img :src='picurl' :style="{position:'relative', top:getTop, left:getLeft}"/>
</div>
</div>
</body>
</html>JavaScript:
<script>
var card1 = new Vue({
el:'#card1',
data:{
// 改变y,x的值，就可以动态切换裁剪后的图片
y:1, // 每格图片的y轴编号，从0起
x:2, // .........x............
divsize:{
width:card_width, // 每格图片的宽，详见下文；下同
height:card_height,
overflow:'hidden'
},
picurl:'./0_1.jpg' // 图片地址
},
computed:{
// 计算属性，求偏移量
getTop: function(){
return ''+(-pic_top_margin-card_height*this.y)+'px';
},
getLeft: function(){
return ''+(-pic_left_margin-card_width*this.x)+'px';
}
}
})
</script>其中，下面这四个值分别是原素材左上角的起始点坐标(leftx,top)、每格图片的尺寸width，height：
var card_width = 156;
var card_height = 241;
var pic_left_margin = 56;
var pic_top_margin = 48;