Vue之动态绑定属性
Vue之动态绑定
一、v-bind基础使用
v-bind能给元素动态绑定属性 img中的src在大多数情况下都是动态传递过来的数据,并非是写死的,这时就需要用v-bind的语法,做src属性的动态绑定。 在需要动态绑定的属性前加上v-bind:,告诉Vue这个属性我需要动态绑定。
<div id="app">
<img v-bind:src="imageUrl" alt="">
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data : {
imageUrl : 'https://www.baidu.com/images/vue/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
}
})
</script>
v-bind的简写(语法糖)为:
<div id="app">
<img v-bind:src="imageUrl" alt="">
<!-- v-bind 语法糖 : -->
<img :src="imageUrl" alt="" srcset="">
</div>
注意: 在动态绑定属性时,不能用Matach语法,Vue不会对属性值进行解析,显示出来的属性值只是一个字符串,Matach只能用在属性的content区域
<div id="app">
<img v-bind:src="imageUrl" alt="">
<!-- v-bind 语法糖 : -->
<img :src="imageUrl" alt="" srcset="">
<img src="{{imageUrl}}" alt="" srcset="">
</div>
相关完整代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 错误的做法: 这里不可以使用mustache语法-->
<!--<img src="{{imgURL}}" alt="">-->
<!-- 正确的做法: 使用v-bind指令 -->
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHref">百度一下</a>
<!--<h2>{{}}</h2>-->
<!--语法糖的写法-->
<img :src="imgURL" alt="">
<a :href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
imgURL: 'https://img11.360buyimg.com/mobilecms/s350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/74fc2f84e53a9c23.jpg!q90!cc_350x250.webp',
aHref: 'http://www.baidu.com'
}
})
</script>
</body>
</html>
二、v-bind动态绑定class(对象语法)
2.1、用法:
通过布尔值决定是否将该类名添加到class上
<p :class="{类名1:布尔值,类名2:布尔值}"></p>
背景:通过判断给class添加类名,动态改变元素的样式。
<style>
.active{
color: red;
}
</style>
- 在class前用v-bind的语法糖,动态绑定class的属性
- 给class属性创建一个对象,用键值对的方式给类名添加false或true
- true则给class添加该类名,false则不添加
- true和false可以动态改变
<div id="app">
<p :class="{active:isActive,line:isLine}">Hello</p>
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el : '#app',
data : {
isActive : true,
isLine : true
}
})
</script>
控制台动态改变isActive
此时p标签上的active属性消失
2.2、简化行间代码
行间的代码通过函数返回
<div id="app">
<p :class="getClasses()">Hello</p>
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el : '#app',
data : {
isActive : true,
isLine : true
},
methods : {
getClasses : function () {
return {active:this.isActive,line:this.isLine}
}
}
})
</script>
案例
点击按钮,切换div的样式 触发绑定在button上的click的事件,在isChange函数中改变isActive的属性值。
CSS代码:
.inner{
width: 50px;
height: 50px;
background-color: black;
}
.active{
background-color: red;
}
Html代码;
<div id="app">
<div class="inner" :class="{active:isActive}"></div>
<button v-on:click = "isChange()">切换</button>
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el : '#app',
data : {
isActive : true,
isLine : true
},
methods : {
isChange : function() {
//改变isActive的boolean值
this.isActive = !this.isActive;
}
}
})
</script>
相关完整代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<!--<h2 class="active">{{message}}</h2>-->
<!--<h2 :class="active">{{message}}</h2>-->
<!--<h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2>-->
<!--<h2 v-bind:class="{类名1: true, 类名2: boolean}">{{message}}</h2>-->
<h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
<h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isActive: true,
isLine: true
},
methods: {
btnClick: function () {
this.isActive = !this.isActive
},
getClasses: function () {
return {active: this.isActive, line: this.isLine}
}
}
})
</script>
</body>
</html>
运行结果:
点击按钮:
可是实现颜色的切换~
三、v-bind动态绑定class(数组语法)
3.1、用法
数组中的所有类名都会被绑定到class上
<p :class="[类名1,类名2,类名3]"></p>
举例:
<div id="app">
<!-- 数组中元素是字符串-->
<p :class="['active','line']">Hello</p>
</div>
上面这种方法不常用,这和直接在行间添加class类名的效果完全相同 一般用于需要动态获取传递过来的类名
<div id="app">
<!--数组中的元素是变量-->
<p :class="[active,line]">Hello</p>
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el : '#app',
data : {
active : 'aaaaa',
line : 'bbbbb'
}
})
</script>
3.2、简化行间代码
class获取的类名用函数返回
<div id="app">
<p :class="getClasses()">Hello</p>
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el : '#app',
data : {
active : 'aaaaa',
line : 'bbbbb'
},
methods : {
getClasses : function() {
return [active,line];
}
}
})
</script>
相关完整代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2 class="title" :class="[active, line]">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active: 'aaaaaa',
line: 'bbbbbbb'
},
methods: {
getClasses: function () {
return [this.active, this.line]
}
}
})
</script>
</body>
</html>
四、v-bind动态动态绑定style(对象语法)
4.1、用法
style属性要用小驼峰法
:style="{fontSize:'50px',backgroundColor:'red'}"
举例: 属性值是个字符串'50px',不能动态改变
<div id="app">
<p :style="{fontSize:'50px'}">hello</p>
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el : '#app',
data : {
fontSize : 50,
currentColor: 'red'
}
})
</script>
属性值换成data中的变量fontSize,可以动态改变
<div id="app">
<p :style="{fontSizefinalSize+'px'}">hello</p>
</div>
4.2、简化代码
style的行间用函数替换
<div id="app">
<p :style="getStyle()">hello</p>
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el : '#app',
data : {
finalSize : 50,
currentColor: 'red'
},
methods : {
getStyle : function() {
return {fontSize:this.finalSize+'px'};
}
}
})
</script>
相关完整代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.title {
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<div id="app">
<!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->
<!--'50px'必须加上单引号, 否则是当做一个变量去解析-->
<!--<h2 :style="{fontSize: '50px'}">{{message}}</h2>-->
<!--finalSize当成一个变量使用-->
<!--<h2 :style="{fontSize: finalSize}">{{message}}</h2>-->
<h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2>
<h2 :style="getStyles()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
finalSize: 100,
finalColor: 'red',
},
methods: {
getStyles: function () {
return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
}
}
})
</script>
</body>
</html>
五、v-bind动态绑定style(数组语法)
1.用法
:style="[baseStyle1,baseStyle2]"
baseStyle1,baseStyle2存储在Vue的data中
methods : { baseStyle1 : {backgroundColor:'red'}, baseStyle2 : {fontSize:'50px'}, }
<div id="app">
<p :style="[baseStyle1,baseStyle2]">hello</p>
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el : '#app',
data : {
finalSize : 50,
currentColor: 'red',
baseStyle1 : {backgroundColor:'red'},
baseStyle2 : {fontSize:'50px'}
}
})
</script>
相关完整代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
baseStyle: {backgroundColor: 'red'},
baseStyle1: {fontSize: '100px'},
}
})
</script>
</body>
</html>
相关文章
- vue相关的面试题应该怎么答
- vue 加载页面时触发时间_Vue 刷新页面时会触发事件吗「建议收藏」
- 一篇文章,Vue快速入门!!!
- Vue中显示img图片,显示不出来怎么办?vue显示图片
- vue详解_vuex getters
- 基于vue的简单轻便的开源图片预览组件
- VUE双向绑定原理_vue的数据绑定怎么实现
- vue源码分析-v-model的本质
- vue源码分析-从new Vue开始
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- vue.js与jquery的区别_说出两者之间的区别
- vue可以和jquery一起用吗_项目中vue和jquery一起如何使用
- Vue 快速体验
- Vue 常用指令(上)
- vue如何引用外部js_引入外部js文件
- Vue生成二维码_vue通过二维码分享
- 前端三大框架之Vue-day01
- Vue style里面使用@import引入外部css, 作用域是全局的解决方案
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- 【架构师(第三十三篇)】 Vue 中的实例及本地图片预览
- Vue 3 + Typescript + Vite 基个人网站二维码登录功能
- Vue-CLi2配置打包环境
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- IDEA安装Vue插件后为什么创建.vue文件不显示vue图标
- 前端 CST和GMT+0800时间转换(js/vue/react/jsp通用)
- Vue 指令之v-bind指令绑定属性
- Vue用Redis储存获取数据(vue获取redis)
- 用Vue从Redis中获取强有力的数据(vue用redis中数据)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- Vuejs 和 Redis 构建高效稳健Web应用(vue redis)
- Oracle与Vue官网联合宣传前瞻技术,轻松开发(oracle vue官网)