美文网首页壁纸小家程序员让前端飞
web前端vue:是这样绑定vue的Class与Style

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

作者: 玩点小技术 | 来源:发表于2017-12-30 12:30 被阅读42次
vue页面结构

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

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

<style>
.a{background-color:#f00;}
.b{background-color:#000;}
</style>
<template>

<div v-bind:class="[style1 ?  'a' : 'b']">样式1</div>
<div :class="[style1 ?  'a' : 'b']">样式1</div>  // 简写

<div v-bind:style="{color: #f00, fontSize: fontSize + 'px'}">样式2</div>
<div :style="{color: #f00, fontSize: fontSize + 'px'}">样式2</div> // 简写

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

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

相关文章

网友评论

    本文标题:web前端vue:是这样绑定vue的Class与Style

    本文链接:https://www.haomeiwen.com/subject/uyyggxtx.html