1-6.Vue内部指令之v-bind

最新推荐文章于 2023-07-11 18:02:08 发布
最新推荐文章于 2023-07-11 18:02:08 发布
阅读量146 收藏
点赞数 1
分类专栏： Vue学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43913219/article/details/103988946
版权

Vue入门

vue内部指令--------v-bind指令

v-bind是处理HTML中的标签属性的，例如img标签的src属性
v-bind的两种写法

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
现在介绍一下v-bind的主要应用：
1.v-bind绑定img标签的src属性，对src进行动态赋值
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind实例</title>
		<script type="text/javascript" src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>这是v-bind绑定标签属性的实例</h1>
			<p>绑定img标签的src属性</p>
			<img v-bind:src="imgUrl" width="400px" />
			<p>v-bind的缩写,直接用“ : ”来代替</p>
			<img :src="imgUrl" width="400px"/>
         </div>
         <script>
			var demo=new Vue({
				el:'#app',
				data:{
					imgUrl:'http://img3.imgtn.bdimg.com/it/u=1740814700,1451766025&fm=15&gp=0.jpg'
				}
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

2.v-bind绑定css样式，v-bind可以用“ ："代替
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind实例</title>
		<script type="text/javascript" src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div :class="classA">1.v-bind绑定css样式</div>
         </div>
         <style>
			.boxA{
				color: red;
			}
			.boxB{
				font-size:30px;
			}
		</style>
         <script>
			var demo=new Vue({
				el:'#app',
				data:{
					classA:'boxA'
				}
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

3.v-bind绑定css样式，加入判断

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind实例</title>
		<script type="text/javascript" src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		<div :class="{boxA:isOk}">2.v-bind绑定css样式:通过判断isOk的值，改变字显示的样式</div>
			<input type="checkbox" id="one" value="one" v-model="isOk"/>
			<label for="one">选择的isOk的值时：{{isOk}}</label>
         </div>
         <style>
			.boxA{
				color: red;
			}
			.boxB{
				font-size:30px;
			}
		</style>
         <script>
			var demo=new Vue({
				el:'#app',
				data:{
				    classA:'boxA',
					classB:'boxB',
					isOk:false
				}
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

4.v-bind绑定数组
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind实例</title>
		<script type="text/javascript" src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		    <div :class="[classA,classB]">3.v-bind绑定数组</div>
         </div>
         <style>
			.boxA{
				color: red;
			}
			.boxB{
				font-size:30px;
			}
		</style>
         <script>
			var demo=new Vue({
				el:'#app',
				data:{
				    classA:'boxA',
					classB:'boxB',
					isOk:false
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

5.v-bind应用于三元运算
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind实例</title>
		<script type="text/javascript" src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		   <div :class="isOk?classA:classB">4.v-bind使用三元运算</div>
         </div>
         <style>
			.boxA{
				color: red;
			}
			.boxB{
				font-size:30px;
			}
		</style>
         <script>
			var demo=new Vue({
				el:'#app',
				data:{
				    classA:'boxA',
					classB:'boxB',
					isOk:false
				}
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

6.v-bind应用于style样式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind实例</title>
		<script type="text/javascript" src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		   <div :style="{color:red,fontSize:font}">5.v-bind绑定style</div>
         </div>
         <style>
			.boxA{
				color: red;
			}
			.boxB{
				font-size:30px;
			}
		</style>
         <script>
			var demo=new Vue({
				el:'#app',
				data:{
				    classA:'boxA',
					classB:'boxB',
					isOk:false,
					red:'red',
					font:'25px'
				}
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

7.v-bind：用对象绑定style样式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind实例</title>
		<script type="text/javascript" src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		  <div :style="objectBind">6.v-bind用对象绑定style样式</div>
         </div>
         <style>
			.boxA{
				color: red;
			}
			.boxB{
				font-size:30px;
			}
		</style>
         <script>
			var demo=new Vue({
				el:'#app',
				data:{
				    classA:'boxA',
					classB:'boxB',
					isOk:false,
					red:'red',
					font:'25px',
					objectBind:{
						color:'blue',
						fontSize:'35px',
					}
				}
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

落叶~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的学习代码-vue的指令部分 如 vue-if、vue-for、vue-model、vue-bind...
05-12
在“vue的学习代码-vue的指令部分”中，我们将深入探讨Vue的一些核心指令，如`v-if`、`v-text`、`v-for`、`v-on`、`v-model`、`v-bind`、`v-pre`和`v-html`，这些指令是Vue实现动态交互和数据渲染的关键。...
vue里面的v-bind三元表达式
姚辉乾
08-13 1万+
&lt;h2&gt;v-bind&lt;/h2&gt; &lt;h2 v-bind:class="g"&gt;V-bind demo&lt;/h2&gt; &lt;h2 v-bind:class="{red:off}"&gt;接收判断条件&lt;/h2&gt; &lt;h2 v-bind:class="{r,g}"&gt;{r:r,
Vue3 CSS v-bind 计算和三元运算
FunnyWhiteCat的博客
07-11 1720
CSS 中的 v-bind 支持 JavaScript 表达式，但需要用引号包裹起来
vue.js学习之模块语法：v-html、v-bind、三元运算
tiaoqiucai1740的博客
02-02 572
vue.js学习之模块语法：v-html、v-bind、三元运算 官方文档永远都是最好的文档 废话不说了，直接说标题中语法的含义： v-html： 该指令后面往往会跟上一个string类型，会将string的html解析出来并且进行渲染。通俗点来讲它可以识别标签中的内容并渲染显示到页面中。 {{ 1 == 1 ? 'YES' : 'NO' }}：就是三元运算书写格式，就是一个判断语句，听说过if（）｛｝else｛｝吗，没错，明白了吧。 {{ message.split(’’).reverse().join
vue v-bind 三元表达式 动态绑定 选中的样式
小道仙的后宫
12-19 9381
效果如下：   也就是随着我们的鼠标点击而去选中某一个选项。   我们需要之前写好 两组样式，也就是没有选中，和选中的样式。 然后我们使用 v-bind 加上三元表达式来实现。   实现思路： 我们定义一个 active 的变量，给它一个默认值， 当我们点击了某一个标签，就让这个 active 的值等于 这个标签的值。也就是选中那个标签的意思。 下面给出实现代码。 至于两组 ...
Vue.js中v-bind的使用
云中客的博客
05-14 2497
      操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串的结果即可。由于字符串拼接麻烦易错，因此Vue中表达式结果的类型除了字符串之外，还可以是对象或数组。 绑定HTML Class （v-bind:style)   1.对象语法 我们可以传给 v-bind:class 一个对象，以动态地切换...
vue里面v-bind和Props 利用props绑定动态数据的方法
10-18
在Vue.js框架中，`v-bind` 和 `props` 是两个关键的概念，它们主要用于在父组件和子组件之间传递数据。本文将详细讲解如何利用 `v-bind` 和 `props` 来绑定动态数据。 首先，`v-bind` 是Vue的一个指令，它的作用是...
Vue条件循环判断+计算属性+绑定样式v-bind的实例
10-18
1. `v-if`指令用于在满足特定条件时才渲染元素。例如，在示例中，当`seen`为`true`时，`<p>`标签将显示文本“现在你看到我了”。`v-if`也可以与`<template>`标签结合，用于创建条件性的模板块。 2. `v-else-if`用于...
详解VueJs中的V-bind指令
10-18
`v-bind`指令是Vue.js中的核心特性之一，用于动态地绑定元素属性。它允许开发者将Vue实例的数据与HTML元素的属性值关联起来，使得属性的值随着数据的变化而自动更新。`v-bind`指令通常用于绑定`class`、`style`、`...
my-vue.zip Vue-Cli 相关练习
01-17
- **指令系统**：如`v-if`, `v-for`, `v-bind`, `v-on`等，用于增强HTML元素的行为。 - **组件化**：Vue的核心理念之一，组件是可复用的代码块，可以通过组合创建复杂的用户界面。 - **计算属性与侦听器**：计算...
动态绑定属性,v-bind的深入学习
whlovedlw的博客
05-19 790
1. v-bind的基本使用
Vue指令指令大全
明月如霜丶
04-03 3474
1. v-text v-text主要用来更新textContent，可以等同于JS的text属性。 <span v-text="msg"></span> 这两者等价： <span>{{msg}}</span> 2. v-html 双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的inn...
vue之v-bind踩坑系列——绑定src
weixin_42761614的博客
01-27 1229
vue之v-bind踩坑系列之绑定src v-bind在绑定img标签中的src属性时，vue会把相对地址解析成字符串，而非路径所以会导致图片无法正常显示 无法生效的代码 `<tab-bar-item v-for="i in 4"> <img slot="item-icon" :src="'./assets/img/tabbar/'+tabbaricon[i-1]+'.svg'" alt=""> </tab-bar-item>` data(){ retur
vue.js—v-bind绑定Class与Style
理想主义的花最终会盛开在浪漫主义的土壤里，我的热情永远不会熄灭在现实的平凡之中，我们终将上岸，阳光万里。
06-30 5879
v-bind用于动态地绑定一个或者多个attribute,或者一个porp到表达式。首先明确一下attribute的概念，什么是attribute，attribute 是元素标签的属性。那什么是元素标签的属性？以HTML为例，例如: 这篇博客主要总结的是v-bind绑定class和style这一种情况。在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。我们可以传给 v-bind:class 一个对象，以动态地切换 cl
vuejs学习笔记 v-model v-on v-bind computed vue三目运算符
qq_25009679的博客
01-24 1万+
html> html lang="en"> head> meta charset="UTF-8"> link rel="stylesheet" href="./css/bootstrap.min.css"> title>Titletitle> head> style> .complete{ color: #00a65a; text-d
v-bind 的动态绑定语法
Z13955558735的博客
05-19 167
1.v-bind:class 动态绑定 class对象 需要先绑定一个class对象{active: isActive} 任何名都可以 在设置键 active 的一个style 属性，用 值 isActive 为 true 去渲染 切换也就是取反 isActive <style> .active{ color: red; } </style> </head> <body>
vue中v-bind使用三目运算符绑定class
热门推荐
weixin_38098192的博客
05-17 5万+
通过动态的切换isOk就可以达到切换class的效果，isOk可以为一个表达式如num&gt;1,如果data中num大于1，则显示classA，否则显示classB
3-3.Vue选项之methods选项
落叶的博客
01-22 6045
Vue选项 Vue中methods选项 构造器里的methods选项在不同情况下有不一样的调用方式，有下面三种情况： 1.在Vue构造器内部调用方法—methods选项 点击按钮，实现数值相加的功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue中的...
3-1.Vue选项之propsData传递数据
落叶的博客
01-21 4850
Vue选项 propsData进行传递数据 使用全局扩展器时可以利用propsData传递数据 先自定义header标签，利用Vue.extend进行扩展构造器，往扩展构造器传递数据时，需要在挂载时调用propsData传递数据。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l...
vue v-bind使用
最新发布
08-04
Vue中的v-bind指令用于将Vue实例中的数据绑定到HTML元素的属性上，实现响应式更新。一般情况下，我们不能直接使用插值语法{{ }}来绑定属性值，而是需要使用v-bind指令。例如，我们可以使用v-bind:title来将Vue实例中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值