vbind以及class与style的绑定-vue笔记4
栏目: JavaScript · 发布时间: 5年前
内容简介：在数据绑定中，最常见的两个需求就是元素的样式名称 class 和内联样式 style 的动态绑定使用v-bind动态设置链接的 href 属性和图片的 src 属性，当数据变化时，就会重新渲
在数据绑定中，最常见的两个需求就是元素的样式名称 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 的几种方式
1、普通绑定class
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 。
无需再加前缀属性！！！
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- WPF绑定语法的笔记
- 学习MVVM及框架的双向绑定笔记
- vue笔记1 数据绑定，生命周期的钩子函数
- Golang Echo数据绑定中time.Time类型绑定失败
- 如何在Symfony的表单中添加一个未绑定字段,否则绑定到一个实体？
- js双向绑定
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
深入理解Nginx（第2版）
陶辉 / 机械工业出版社 / 2016-2 / 99.00元
本书致力于说明开发Nginx模块的必备知识，第1版发行以后，深受广大读者的喜爱．然而由于Ng,nx功能繁多且性能强大，以致必须了解的基本技能也很庞杂，而第1版成书匆忙，缺失了几个进阶的技巧描述，因此第2版在此基础上进行了完善。 书中首先通过介绍官方Nginx的基本用法和配置规则，帮助读者了解一般Nginx模块的用法，然后重点介绍了女口何开发HTTP模块(含HTTP过滤模块)来得到定制化的Ng......一起来看看 《深入理解Nginx（第2版）》 这本书的介绍吧!
