Vue2.0笔记——属性绑定和Class与Style绑定

属性绑定

通过指令v-bind可以绑定属性,该指令同v-on一样，也有一个简写，“：”冒号。
绑定元素的属性，并且可与元素的原属性共存。当原属性有值时则显示原属性的值，无值则使用绑定的值。

<div id="app">
    <img :src="url" :width="width" width="800" :height="height"/>
</div>

data:{
    url:"https://www.baidu.com/img/bd_logo1.png",
    width:300,
    height:300
}

这是属性绑定的用法。

Class与Style绑定

我们同常绑定class时，直接写在class中,这是普通的css绑定。

<style>
    .aa{
        color: red;
    }
    .bb{
        color: blue;
    }
</style>

<p class="aa">这是一段文字，用来测试Class与Style绑定</p>

而如果将这种普通绑定应用在Vue中是不行的。不能直接写:class=‘aa‘

<p :class="aa">这是一段文字，用来测试Class与Style绑定</p>

这样做它是不会显示出来的。
我们需要通过Vue数据data来动态实现。

直接通过data选项中变量的方式

先定义class样式，然后再:class里填写与样式名绑定的名称

data:{
    color:‘aa‘
}
<p :class="color">通过Vue中data选项的变量来动态控制</p>

此时color值为aa，那么么颜色就是red,如果动态的为color属性值赋值为bb，那么字体颜色就为blue了。

通过数组的方式

.line{
        text-decoration: underline;
    }
<p :class="[color,line]">通过数组的方式来控制多个</p>

另外，指令中是可以有表达式的，就如上面的数组，还可以对data选项的某个number类型的属性进行数据操作，它仅能实现小的操作，而不能去实现语句。

通过json格式的方式绑定

这次可以不与data选项的属性有牵扯,直接通过设置类样式的值为true|false
为true则使用这个样式，为false则不使用这个样式，通过true|false来判定是否出现样式。这种方式也是最佳常用的。

    <p :class="{bb:false,line:true}">通过json的方式来绑定class</p>

由于，值为true|false，那么么我们也可以通过值大小的方式给定true或false。

data:{
    num:-99
}
<p :class="{bb:false,line:num>0}">通过json的方式来绑定class</p>

此时line的属性值是返回false，此时不会显示下划线。

通过变量引用json形式

就是不把json数据写在：class中了，而是定义为实例的一个属性，放在data中。
格式还是这样，不过是放在一个属性中。

data:{
    line_blue:{aa:true,line:true}
}
<p :class="line_blue">通过json变量的方式来绑定</p>

另外，在数组和json中都可以使用三元表达式？：的方式。

绑定内联样式

即通过绑定style, :style方式

data:{
    color:red,
    fontSize:20,

}
<p :style="{color:color,fontSize:fontSize + ‘px‘}">绑定内联</p>

因为内联的style可以直接在元素中写，所以json中的key都是css属性，color,textDecoration,fontSize这些内联的样式，(内联的和style文件内的样式名不一样,文件里是横杠，内联是驼峰首字母大写)。
另一个就是直接通过属性的方式了，把json赋值给属性。

data:{
    style1:{color:‘blue‘,fontSize:‘15px‘}
}
<p :style="style1">绑定内联</p>

同样，数组也是可以的。

多重值

绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值

<div :style="{ display: [‘-webkit-box‘, ‘-ms-flexbox‘, ‘flex‘] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

原文地址：http://blog.51cto.com/zouzhelu/2103659

时间： 2024-07-31 18:04:03