详解VUE中v-bind的基本用法

1. v-bind:class（根据需求进行选择）1.112345678910111213141516171819202122232425...

燕山八音

11076人浏览 · 2018-08-23 22:22:33

燕山八音 · 2018-08-23 22:22:33 发布

1. v-bind:class（根据需求进行选择）

1.1

<style>

.box{

background-color: #ff0;

}

.textColor{

color: #000;

}

.textSize{

font-size: 30px;

}

</style>

<div id="app">

<span class="box" :class="{'textColor':isColor, 'textSize':isSize}">我是字</span>

</div>

<script>

　　new Vue({

　　el: "#app",

　　data:{

　　isColor:true,

　　isSize:true

　　}

　　})

</script>

1.2

<style>

.box{

background-color: #ff0;

}

.textColor{

color: #000;

}

.textSize{

font-size: 30px;

}

</style>

<div id="app">

<span class="box" :class="classObject">我是字</span>

</div>

<script>

new Vue({

el: "#app",

data:{

classObject:{

'textColor': true,

'textSize': true

}

})

</script>

1.3

<style>

.box{

background-color: #ff0;

}

.textColor{

color: #0f0;

}

.textSize{

font-size: 30px;

}

</style>

<div id="app">

<span class="box" :class="[classA,classB]">我是字</span>

</div>

<script>

new Vue({

el: "#app",

data:{

classA: 'textColor',

classB: 'textSize'

}

})

</script>

1.4

<style>

.box{

background-color: #ff0;

}

.textColor{

color: #0f0;

}

.textSize{

font-size: 30px;

}

</style>

<div id="app">

<span class="box" :class="[isA?classA:'', classB]">我是字</span>

</div>

<script>

new Vue({

el: "#app",

data:{

classA: 'textColor',

classB: 'textSize',

isA: false

}

})

</script>

2.v-bind:style (根据需求进行选择，驼峰式)

2.1

<div id="app">

<span class="box" :style="{color:activeColor, fontSize:size,textShadow:shadow}">我是字</span>

</div>

<script>

new Vue({

el: "#app",

data:{

activeColor: 'red',

size: '30px',

shadow: '5px 2px 6px #000'

}

})

</script>

2.2

<div id="app">

<span class="box" :style="styleObject">我是字</span>

</div>

<script>

new Vue({

el: "#app",

data:{

styleObject:{

color: 'red',

fontSize: '30px',

textShadow: '5px 2px 6px #000'

}

})

</script>

2.3

<div id="app">

<span class="box" :style="[styleA,styleB]">我是字</span>

</div>

<script>

new Vue({

el: "#app",

data:{

styleA:{

fontSize: '30px',

color: 'red'

},

styleB:{

textShadow: '5px 2px 6px #000'

}

})

</script>

2.4

<div id="app">

<span class="box" :style="[isA?styleA:'', styleB]">我是字</span>

</div>

<script>

new Vue({

el: "#app",

data:{

styleA:{

fontSize: '30px',

color: 'red'

},

styleB:{

textShadow: '5px 2px 6px #000'

},

isA: false

}

})

</script>

3.v-bind:src

<div id="app">

<img :src="url" />

</div>

<script>

new Vue({

el: "#app",

data:{

url: "../img/pg.png"

}

})

</script>

4.v-bind:title

<div id="app">

<div :title="message">我是字</div>

</div>

<script type="text/javascript">

new Vue({

el: "#app",

data:{

message:"我是吱吱"

}

})

</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^