v-bind动态绑定
目录
一、 v-bind的基本使用
1. v-bind的基本使用
2. Class 与 Style 绑定
二、 v-bind动态绑定class
1. v-bind动态绑定class(对象语法)
2. v-bind动态绑定class(数组用法)
三、 v-for和v-bind结合
四、v-bind动态绑定style
1. v-bind动态绑定style(对象语法)
2. v-bind动态绑定style(数组语法)
一、 v-bind的基本使用
1. v-bind的基本使用
某些时候我们并不想将变量放在标签内容中，像这样 <h2>{{message}}</h2> 是将变量h2标签括起来，类似 js的innerHTML。
但是我们期望将变量 imgURL 写在如下位置，想这样 <img src="imgURL" alt=""> 导入图片是希望动态获取图片的链接，此时的 imgURL 并非变量而是 字符串 imgURL，如果要将其生效为变量，需要使用到一个标签 v-bind:，像这样<img v-bind:src="imgURL" alt="">，而且这里也不能使用Mustache语法，类似<img v-bind:src="{{imgURL}}" alt="">，这也是错误的。
<!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>
</head>
<body>
<div id="app">
<!-- 错误的做法这里不能使用Mustache语法 -->
<!-- <img v-bind:src="{{imgURL}}" alt=""> -->
<!-- 正确的做法使用v-bind指令 -->
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHerf"></a>
<!-- 语法糖写法 -->
<img :src="imgURL" alt="">
<a :href="aHerf"></a></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
imgURL:"https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1",
aHerf:"http://www.baidu.com"
}
})
</script>
</body>
</html>
此时vue对象中定义的 imgURL 变量和 aHerf 变量可以动态的绑定到img标签的src属性和a标签的href属性。v-bind:由于用的很多，vue对他有一个语法糖的优化写法也就是:，此时修改imgURL变量图片会重新加载。
2. Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。v-bind 在处理 class 和 style 时，表达式结果的类型除了字符串之外，还可以是对象或数组。
v-bind:class 可以简写为 :class。
二、 v-bind动态绑定class
1. v-bind动态绑定class(对象语法)
有时候我们期望对Dom元素的节点的class进行动态绑定，选择此Dom是否有指定class属性。例如，给h2标签加上class="active"，当Dom元素有此class时候，变红<style>.active{color:red;}</style>，在写一个按钮绑定事件，点击变黑色，再次点击变红色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.active {
color:#f00;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="{active:isactive}" @click="change">{{msg}}</h2>
<h2 :class="changeActive()" @click="change">{{msg}}</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
msg:'动态绑定对象',
isactive:false
}
},
methods:{
change(){
this.isactive = !this.isactive
},
changeActive(){
return {active:this.isactive}
}
}
})
</script>
</body>
</html>
定义两个变量 active 和 isActive，在Dom元素中使用 :class={active:isActive}，此时绑定的class='active'，isActive为true，active显示，定义方法change()绑定在按钮上，点击文字this.isActive = !this.isActive，控制Dom元素是否有 class='active' 的属性。
2. v-bind动态绑定class(数组用法)
class属性中可以放数组，会依次解析成对应的class。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h2 :class="['active','aaa']">我们正在学习vue</h2>
<h2 :class="[active,aaa]">我们正在学习vue</h2>
<h2 :class="getStyle()">我们正在学习vue</h2>
</div>
<script>
/* 数组中加引号和不加引号有区别
加引号:表示字符串 是固定的,
不加引号:表示变量是不固定的 */
const vm = new Vue({
el:'#app',
data(){
return {
active:'isactive',
aaa:'bbb'
}
},
methods:{
getStyle(){
return [this.active,this.aaa]
}
}
})
</script>
</body>
</html>
加上单引号的表示字符串
不加的会当成变量
可以直接使用方法返回数组对象
三、 v-for和v-bind结合
使用v-for和v-bind实现一个小demo，将电影列表展示，并点击某一个电影列表时候，将此电影列表变成红色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.active {
color: #f00;
}
</style>
</head>
<body>
<div id="app">
<ul>
<!-- <li v-for="(item,index) in movies" :key="index" :class="{active:currentIndex==index}" @click="change(index)">{{item}}</li> -->
<li v-for="(item,index) in movies" :key="index" :class="currentIndex==index?'active':''" @click="change(index)">{{item}}</li><!-- 动态绑定三元表达式 -->
</ul>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
currentIndex: 0,
movies: ["海王", "海贼王", "火影忍者", "复仇者联盟"]
}
},
methods: {
change(i) {
/* this.currentIndex = i */
if (this.currentIndex == i) return
this.currentIndex = i
}
}
})
</script>
</body>
</html>
v-for时候的index索引，给每行绑定事件点击事件，点击当行是获取此行索引index并赋值给currentIndex，使用v-bind:绑定class，当index===currentIndexDom元素有active的class，颜色变红。
四、v-bind动态绑定style
1. v-bind动态绑定style(对象语法)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h2 :style="{fontSize:'50px'}">我们爱学习</h2>
<h2 :style="{fontSize:fontsize}">我们爱学习</h2>
<h2 :style="getStyle()">我们爱学习</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
fontsize:40+'px'
}
},
methods:{
getStyle(){
return {fontSize:this.fontsize}
}
}
})
</script>
</body>
</html>
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
2. v-bind动态绑定style(数组语法)
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
类似绑定class，绑定style也是一样的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h2 :style="[baseStyle]">我们爱学习</h2>
<h2 :style="['baseStyle']">我们爱学习</h2><!-- 无意义 -->
<h2 :style="getStyle()">我们爱学习</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
baseStyle:{background:'#f00'}
}
},
methods:{
getStyle(){
return [this.baseStyle]
}
}
})
</script>
</body>
</html>
有关v-bind 与class 和style 绑定相关的内容请参考：Class 与 Style 绑定 — Vue.jsVue.js - The Progressive JavaScript Framework
https://cn.vuejs.org/v2/guide/class-and-style.html
v-bind动态绑定相关推荐
- VUE学习一：初识VUE、指令、动态绑定、计算属性
文章目录 导言 一.01-初体验 1. ch01_helloworld.html 2. ==v-for指令==:ch02_vue列表展示_v-for.html 3. ==v-on指令==:ch03.1 ...
- docker安装bind
bind是一个dns服务,可以用来做一些dns相关的测试,或者在内网环境配置自己的域名.bind支持docker部署,这里使用docker进行部署. 需要环境:docker docker的安装可以看看 ...
- [bind]rndc: connect failed: 127.0.0.1#953: connection refused
[root@localhost sbin]# ./named -v bind 9.5.1-p3-v3.0.9 问题现象: [root@localhost sbin]# ./rndc flush -p ...
- bind函数失败linux,为什么bind函数返回-1（绑定失败）？
我想将一个套接字绑定到IP地址和它将监听连接的端口.这里是我的相关代码(W注释和调试打印语句)为什么bind函数返回-1(绑定失败)? #define PORTNUM 2345 int main(in ...
- ❤️《Vue前端基础框架集合从入门到高级》（小白也可学，建议收藏）❤️
<Vue前端基础框架集合从入门到高级>,小白也可学 文章目录 <Vue前端基础框架集合从入门到高级>,小白也可学 ❤️一.前端核心分析 ❤️1.1.概述 ❤️1.2.前端三要素 ...
- vue实现php传数据,vue+props传递数据怎样实现
这次给大家带来vue+props传递数据怎样实现,vue+props传递数据的注意事项有哪些,下面就是实战案例,一起来看一下. 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传 ...
- Vue简单快速上手 idea版
文章目录 版本 插件安装和通过CDN使用Vue Vue的基本语法 v-bind 条件判断 循环 监听事件 表单双绑 1.什么是双向数据绑定 2.在表单中使用双向数据绑定 组件 什么是组件 第一个Vue ...
- 杜骡的前端面试题（大全）
interview HTML&CSS 浏览器标准模式和怪异模式之间的区别 标准模式 怪异模式 盒模型 标准盒子模型(实际宽度为设置的width+padding+border+margin) I ...
- props传递对象_vue组件中使用props传递数据的实例详解
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法 组件不仅仅是 ...
- 前端进阶_狂神Vue笔记_语法指令v-bind、v-on、v-for_表单双绑_组件_Axios异步通信_Vue的生命周期_计算属性_插槽 ＜slot＞_webpack使用_vue-router路由
四.第一个Vue程序 4.1.什么是MVVM MVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Si ...
最新文章
- stm32 usart 单线半双工串口 DMA发送 最后一个字节发不出来问题
- 上传漏洞学习——upload-labs 闯关（二）
- c 自定义实现string类 clear_有关类加载器的总结
- linux超实用的管理命令
- linux各种复制命令
- P1552-[APIO2012]派遣【左偏树】
- 第六节: 六类Calander处理六种不同的时间场景
- 新的网站上线 linux视野
- An Overview of MITRE Cyber Situational Awareness Solutions
- Atitit spring单元测试 注解 获取服务名 Spring文件单独放在一个文件夹，去掉dubbo配置，方便测试 里面包含的mybatis 找不到，只好设置成相对于class绝对路径可以了
- InletexEMC绿色好用的电脑屏幕共享软件
- 2016/2/19：ApplePay
- 怎么冻结表格前几行和前几列_如何冻结表格前几列
- 如何在服务器发布网站
- 我如何转变了我的YouTube推荐供稿
- Google Pay India(UPI) 印度
- 商品筛选html,js实现简单商品筛选功能
- Android 之路36---android网络操作
- JSON是什么，有什么用，怎么写json
- XMAN【我真的好菜-同pizza师傅修炼笔记四】hackcon-app.exe