vue2.x(指令v-bind)

作者: Artifacts | 来源:发表于2019-08-13 17:14 被阅读0次

vue2.x(指令v-bind)
Vue基础指令
vue中的指令
【Vue】常用指令之v-bind
v-bind
vue模板语法
vue 零散学习档案
2018-09-14 vue常用指令
v-bind指令
Vue.js从0到1：v-bind指令

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

使用v-bind来绑定css样式：

在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。
1、直接绑定class样式

<div :class="className">1、绑定classA</div>

2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。

<div :class="{classA:isOk}">2、绑定class中的判断</div>

3、绑定class中的数组

<div :class="[classA,classB]">3、绑定class中的数组</div>

4、绑定class中使用三元表达式判断

<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>

5、绑定style

<div :style="{color:red,fontSize:font}">5、绑定style</div>

6、用对象绑定style样式

<div :style="styleObject">6、用对象绑定style样式</div>
var app=new Vue({
   el:'#app',
   data:{
       styleObject:{
           fontSize:'24px',
           color:'green'
            }
        }
})

完整代码：

<!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>v-bind</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-bind 实例</h1>
    <hr>
    <div id="app">
        <p><img v-bind:src="imgSrc" width="200px"></p>
        <p><a :href="webUrl" target="_blank">js</a></p>
        <hr>
        <div :class="className">1.绑定class</div>
        <div :class="{classA:isOk}">2.绑定class中的判断</div>
        <div :class="[classA,classB]">3.绑定class中的数据</div>
        <div :class="isOk?classA:classB">4.绑定class中的三元运算符</div>
        <hr>
        <div>
            <input type="checkbox" id="isOk" v-model="isOk">
            <label for="isOk">isOk={{isOk}}</label>
        </div>
        <hr>
        <div :style="{color:red,fontSize:font}">5.绑定style</div>
        <div :style="styleObject">6.对象绑定style</div>
    </div>
    <p></p>
    <style>
        .classA{
            color: red;
        }
        .classB{
            font-size: 150%;
        }
    </style>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!',
                imgSrc:'http://img2.imgtn.bdimg.com/it/u=4064075977,3738371861&fm=26&gp=0.jpg',
                webUrl:'https://hr.qxwz.com/jobs/?zhinengId=1785&page=1&limit=10',
                className:'classA',
                isOk:false,
                classA:'classA',
                classA:'classB',
                red:'red',
                font:'20px',
                styleObject:{
                    color:'green',
                    fontSize:'22px'
                }
            }
        })
    </script>
</body>
</html>