初识Vue.js(四)

Vue.js 同时被 2 个专栏收录
9 篇文章 0 订阅

4.1 了解 V-bind指令

在之前,我们已经了解过v-bind的基本用法和以及它的语法糖,主要用法是动态更新HTML元素上的属性。

在数据绑定中,最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定,它们也是HTML的属性,因此可以使用V-bind指令。我们只需要v-bind计算出表达式最终的字符串就可以了,不过有时候表达式的逻辑比较复杂,使用字符串拼接方法难以阅读和维护,所以Vue.js加强了对class和style的绑定。

4.2 绑定class的几种方式

4.2.1 对象语法
给 v-bind:class 设置一个对象,可以动态的切换class,例如:

   <body>
        <div id="app">
           <div :class="{'active':'isActive'}" ></div>
        </div>
        <script src="js/vue.js"></script>
        <script>
            var app=new Vue({
                el:'#app',
                data:{
                    isActive:true;
                }   
            })
        </script>
    </body>

上例中,类名active依赖于数据isActive,当其为true时,div会拥有类名active,为false时,则没有。

当class的表达式过长或者逻辑复杂时,还可以绑定一个计算属性,这是一种很友好和常见的用法,一般当条件多于两个的时候,都可以使用data或者computed。
4.2.2 数组语法
当需要多个class的时候,可以使用数组语法,给class绑定一个数组,应用一个class列表 ,也可以用三元表达式根据条件来切换class。

三元运算符:

如名字表示的三元运算符需要三个操作数。

语法是 条件 ? 结果1 : 结果2;
这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。

使用计算属性给元素动态设置类名,在业务中经常遇到,尤其是在写复用的组件时,所以在开发过程中,如果表达式较长或者逻辑复杂,硬尽可能的使用计算属性。

4.3 绑定内联样式

使用v-bind:style(即:style)可以给元素绑定内联样式,
方法和:class相似,也有对象语法和数组语法,看起来很像直接在元素上写css。

 <body>
        <div id="app">
           <div :style="{'color':color,'fontSize';fontSize+'px'}">文本</div>

        </div>
        <script src="js/vue.js"></script>
        <script>
            var app=new Vue({
                el:'#app',
                data:{
                    color:'red',
                    fontSize:15
                }   
            })
        </script>
    </body>

css属性名称使用驼峰命名,或者短横分隔命名。

大多数情况下,直接写一长串的样式不利于阅读和维护,所以一般写在data或者computed里,以data为例子,改写上面的例子。

     <body>
        <div id="app">
           <div :style="styles">文本</div>

        </div>
        <script src="img/js/vue.js"></script>
        <script>
            var app=new Vue({
                el:'#app',
                data:{
                    styles:{
                    color:'red',
                    fontSize:15
                }  
                } 
            })
        </script>
    </body>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值