web前端vue:是这样绑定vue的Class与Style

前端开发 简书

vue页面结构

大家都知道vue是以数据为驱动,不像传统的开发方式是以点击事件来驱动的怎么一个东东。vue我也接触了一个不短的时间了,从最初的不适应到现在运用的熟悉(不适应是用惯了Jquery的“$”还真不习惯vue的这套)但是呢!技术都是在进步的,你不进步就意味着被淘汰。

学过vue的肯定都知道vue的指令吧?传统网页制作要动态的改变页面上的样式,是要写不少东东吧比如:一个触发的事件,写好两种状态的样式,写好js或者jquery(当然还有些伙伴是直接写在js或jquery里,这是相对于样式少的才会怎么做),而vue因为数据驱动它感觉上就没有那么繁琐了比如以下例子:

.a{background-color:#f00;}

.b{background-color:#000;}

样式1

样式1

// 简写

样式2

样式2

// 简写

export default {

data () {

style1: false,

fontSize: 20

}

}

这是vue的样式class和style两种动态改变的例子,style1相当于一个变量,它可以随便放在页面的位置上改变它的值,而v-bind:class和v-bind:style是vue固定的指令,它会监听style1和fontSize的值是否改变做出相印判断,:style的形式有点像传统的内联样式写法,但它也是实时监听的。

传统的(js/jquery)例子我就不献丑了,大家有感兴趣vue的欢迎加我一起学习(微信:nihaomeili87)

简书稿源:简书 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » web前端vue:是这样绑定vue的Class与Style

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录