vbind以及class与style的绑定-vue笔记4

bamboo

修改于 2019-01-29 15:59:03

1.9K0

修改于 2019-01-29 15:59:03

文章被收录于专栏：bamboo前端学习记录bamboo前端学习记录

在数据绑定中，最常见的两个需求就是元素的样式名称 class 和内联样式 style 的动态绑定

一、动态绑定href和src

使用v-bind动态设置链接的 href 属性和图片的 src 属性，当数据变化时，就会重新渲染。代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- v-bind的作用：绑定活的属性！！ -->
    <div id="app">
        <a v-bind:href="url">我是百度</a>
        <img :src="imgUrl" alt="">
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
<script> 
    var app=new Vue({
        el:'#app',
        data:{
            url:'https://www.baidu.com',
            imgUrl:'https://www.baidu.com/img/bd_logo1.png'

        }
    })
</script>       
</body>
</html>

执行结果

当我们改变url的值，a连接就指向了淘宝

二、动态绑定 class 的几种方式

v-bind通常用来绑定属性的，格式是v-bind：属性名 = "值"，简写:属性名 = "值" 变量语法：v-bind：class = "变量"，变量形式 ,这里的变量的值，通常是在css定义好的类名；

数组语法：v-bind：class= "[变量1，变量2]" ，数组形式，其实跟上面差不多，只不过可以同时绑定多个class名；

对象语法：v-bind:class = {classname1：boolean，classname2：boolean}，对象形式，这里的classname1（2）其实就是样式表中的类名，这里的boolean通常是一个变量，也可以是常量、计算属性等，这种方法也是绑定class最常用的方式。

1、普通绑定class

    <style>
    .transRed{
        background-color:red;
        height:30px;
    }
    </style>
     <div v-bind:class="className"></div>
      var app2=new Vue({
        el:'#abc',
        data:{
           className:'transRed',

        }
    })

2、class 对象语法

给 vbind:class 设置一个对象，可以动态地切换 class。 绑定class对象语法,对象的键是类名，值是布尔值.如果布尔值是true，代表该元素添加了对应的class，为false，则没有添加

 <div :class="{divStyle :isActive,borderStyle:isBorderActive}"></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .divStyle{
            background-color: darkred;
            width: 100px;
            height: 100px;
        }
        .borderStyle{
           border: 6px solid yellow;
        }
    </style>
</head>
<body>
    <div id="app">
        绑定class对象语法,对象的键是类名，值是布尔值.如果布尔值是true，代表该元素添加了对应的class，为false，则没有添加
        <div :class="{divStyle :isActive,borderStyle:isBorderActive}"></div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
<script> 
    var app=new Vue({
        el:'#app',
        data:{
            isActive:true, //代表给div添加了divstyle
            isBorderActive:true,
        }
    })
</script>       
</body>
</html>

**当 class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时，都可以使用 data 或 computed**

   <style>
        .active{
            background-color: black;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :class="classNames">计算属性</div> 
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
<script> 
    var app=new Vue({
        el:'#app',
        data:{
            isActive:true, //代表给div添加了divstyle
            isBorderActive:false
 
        },
        computed:{
            classNames:function(){
                return {
                    active:this.isActive&& !this.isBorderActive
                }//return一个对象，active是键名，值是布尔值，因为很复杂
            }
        }
    })
</script>

3、数组语法

当需要应用多个 class 时，可以使用数组语法，给：class 绑定一个数组，应用一个 class 列表：数组成员直接对应className--类名

    <style>
        .active{
            background-color: black;
            width: 100px;
            height: 100px;
        }
        .error{
            border: 6px solid yellow; 
        }
    </style>
</head>
<body>
    <div id="app">
         绑定class数组语法,数组中的成员直接对应类名<br>
         <div style="color:#fff" :class="[activeclass,errorclass]">我是数组绑定class</div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
<script> 
    var app=new Vue({
        el:'#app',
        data:{
            activeclass:'active',
            errorclass:'error'
        }
    })
</script>

4、数组和class对象混用——————看演示

errorclass永远存在，active看情况存在

   <style>
        .active{
            background-color: black;
            width: 100px;
            height: 100px;
        }
        .error{
            border: 6px solid yellow; 
        }
    </style>
</head>
<body>
    绑定class：<br>
    <div id="app">
        数组和对象混用，第一个成员是对象，第二个成员是数组成员<br>
        <div style="color:#fff" :class="[{active:isActive},errorclass]">数组</div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
<script> 
    var app=new Vue({
        el:'#app',
        data:{
            isActive:true, 
            errorclass:'error'
        }
    })
</script>

5、在组件上使用 : 暂时不考虑—挖坑

三、绑定内联样式

使用 vbind:style （即：style ）可以给元素绑定内联样式，方法与：class 类似，也有对象语法和数组语法，看起来很像直接在元素上写 CSS: 注意 : css 属性名称使用驼峰命名（ came!Case ）或短横分隔命名（ kebabcase ），

对象语法

<div :style="{'color':color,'fontSize':fontSize +'px'}">数组</div>//注意要加px

数组语法，很不常见，较为常用的应当是计算属性

</head>
<body>
    <div id="app">
            对象语法绑定内联样式：键代表style的属性值，值代表属性对应的值了。<br>
            驼峰写法：vue中只要是大写字母，就会给你转换成-和小写。<br>
        <div :style="{'color':color,'fontSize':fontSize +'px'}">数组</div>
    </div>
    <div id="app2">
            style数组语法绑定内联样式<br>
        <div :style="[styleA,styleB]">数组</div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
<script> 
    var app=new Vue({
        el:'#app',
        data:{
            color:'red', 
            fontSize:16
        }
    })
    var app2=new Vue({
        el:'#app2',
        data:{
            styleA:{
                width:'100px',
                border:'1px solid red'

            },
            styleB:{
                color:'blue'
            }
        }
    })
</script>

使用 :style 时， Vue .js 会自动给特殊的 css 属性名称增加前缀，比如 transform 。无需再加前缀属性！！！

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-01-20，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

编程算法

css

登录后参与评论

0 条评论

热度