“我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛”
不停变化的兔子
通过调节postSize的数值来调节兔子的大小。
如何保证只改变宽度，而使得图片等比例变化。 在height中设置100%的属性保证照片自适应。 width：100%不同，设为100%已经固定了宽度，宽度始终不变，而宽度自适应是会自动更改宽度 css设置
img{
width: 10vw;
height: 100%;
}
button{
background:pink;
border:1px solid white;
}
事件触发
可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。
绑定对象
我们可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：
<div :class="{ active: isActive }"></div>
语法表示 active 是否存在取决于数据属性 isActive 的[真假值]
你可以在对象中写多个字段来操作多个 class。
在data中定义两变量postFontSize、postSize
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
也可以在子组件父组件之间使用
<MyComponent :class="{ active: isActive }" />
当isActive为正时，:class="active"
:style 支持绑定 JavaScript 对象值，对应的是 [HTML 元素的 style 属性]
在 :style 中使用了需要的 CSS 属性时，
Vue 会自动为他们加上相应的前缀。Vue 是在运行时检查该属性是否支持在当前浏览器中使用。
如果浏览器不支持某个属性，那么将尝试加上各个浏览器特殊前缀，以找到哪一个是被支持的。
变量定义如下:
data() {
return {
postFontSize: 1,
postSize: 1
}
}
完整代码如下
<script>
export default {
data() {
return {
postFontSize: 1,
postSize: 1
}
}
}
</script>
<template>
<div :style="{ fontSize: postFontSize + 'em' }">
<div id="img" >
<img src="https://pic.imgdb.cn/item/63c8e7abbe43e0d30e6808d1.png"
:style="{ width: postSize + 'vw' }"
>
</div>
<button
@click="postSize += 1"
>兔兔变大</button>
<button
@click="postSize -= 1"
>兔兔变小</button>
</div>
</template>
<style scoped>
img{
width: 10vw;
height: 100%;
}
button{
background:pink;
border:1px solid white;
}
</style>
