VUE v-bind的使用

最新推荐文章于 2023-06-09 10:56:54 发布
最新推荐文章于 2023-06-09 10:56:54 发布
阅读量169 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/glovett/article/details/103132431
版权

vue： 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 type="text/css">
			div{
				width: 100px;
				height: 100px;
			}
			.red{
				background: red;
			}
			.green{
				background: green;
			}
			.yellow{
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div id="demo">
			<button type="button" @click="changeColor()">change</button>
			<div :class = "colorClass"></div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#demo',
				data : {
					xborder : '1px solid black',
					colorClass : 'red',
					count : 0
				},
				methods:{
					changeColor() {
						this.count++;
						if(this.count%3 === 0){
							this.colorClass = 'red';
						}else if(this.count%3 === 1){
							this.colorClass = 'green';
						}else{
							this.colorClass = 'yellow';
						}
					}
				}
			})
		</script>
	</body>
</html>

v-bind : 简写 :
给元素绑定多个类名：数组和对象的方法

数组：
<div :class="[class1 , class2,··· ]">
对象：
<div :class="{class1:true},{class:false}">
//class1会被添加，class2不会

给元素绑定style： 数组和对象两种方法
eg:

<div id="demo">
			<button type="button" @click="changeColor()">change</button>
			<div :class = "colorClass"></div>
			<input type="text" placeholder="请输入" v-model="message">
			<p>输入的内容为：{{ message }}</p>
			<ul>
				<li v-for="(value , key ,index) in obj">{{ index   }}</li>
			</ul>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#demo',
				data : {
					xborder : '1px solid black',
					colorClass : 'red',
					message : '',
					count : 0 ,
					obj : {
						fruit : 'bananer',
						food : 'rice'
					}
				},
				methods:{
					changeColor() {
						this.count++;
						if(this.count%3 === 0){
							this.colorClass = 'red';
						}else if(this.count%3 === 1){
							this.colorClass = 'green';
						}else{
							this.colorClass = 'yellow';
						}
					}
				}
			})
		</script>
卿长乐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
v-bind指令的详细介绍
qq_52499703的博客
07-27 651
本篇文章将详细介绍v-bind指令的用法及其应用场景。
vue change事件_Vue 基础
weixin_39960710的博客
11-25 1万+
一、什么是Vue？Vue是js框架，简化Dom操作，响应式数据驱动二、第一个Vue程序使用Vue的一般步骤：导入开发版本的Vue.js创建Vue实例对象，设置el和data, methods等属性使用简洁的模板语法将数据渲染到页面上<html lang="en"><head><meta charset="UTF-8"><meta name="vi...
Vue.js 中的 v-bind 指令详解
it_xushixiong的博客
06-09 2606
Vue.js中的v-bind指令是一种将组件的属性绑定到Vue实例的数据的方式。v-bind指令可以用于将任何组件属性绑定到Vue实例的数据上，例如class、style、属性等。v-bind指令允许我们动态地设置组件的属性，从而使组件更加灵活和可重用。v-bind指令可以使用简写形式进行使用，即通过添加一个前缀符号，例如:class:style等。这使得代码更加简洁和易于阅读。在本文中，我们将深入探讨v-bind指令的使用方法和一些实际的代码示例。
v-bind动态绑定
weixin_52580677的博客
01-06 345
v-bind的基本使用 语法糖（缩写） ： 标签内引用data中的数据，需要加上v-bind <template> <div id="app"> <img v-bind:src="img" alt=""> <a :href="url"></a> </div> </template> <script> export default { name: 'app', data() {
vue(v-bind修改样式属性、自定义命令、过滤器filter)
m0_66970189的博客
06-23 1888
css代码 js代码 v-bind 使用格式 用于修改行内属性 格式： 简写：`:属性名=‘变量’ 注意： class操作类名 单独写一个变量名 只写一个的话，要写变量名 写数组 1. 数组里的数据加引号的话，就填入class名 2. 数组里面的数据不加引号，就填入变量名 对象形式，判断：后面是否为true ，如果是true就调用这个类名的设置的样式 v-for 补充 :key v-for中的key是用于确定当前循环的唯一性，尽量不适用index，一般有id就绑id 自定义指令 全局自定义命令
Vue v-bind动态绑定class实例方法
10-15
在Vue中，`v-bind`指令是用于动态地绑定属性到元素。在这个特定的场景中，我们关注的是如何使用`v-bind`来动态绑定`class`，这是一个非常实用的功能，允许我们在运行时根据数据的变化改变元素的CSS类。 动态绑定`...
vue里面v-bind和Props 利用props绑定动态数据的方法
10-18
今天小编就为大家分享一篇vue里面v-bind和Props 利用props绑定动态数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue中v-bind:style效果的自定义指令
10-15
在Vue中，`v-bind:style` 是一个用于动态绑定CSS样式的指令，它可以接受对象或字符串，方便地根据数据变化更新元素的样式。而自定义指令则是Vue提供的一种扩展机制，允许开发者自定义DOM操作。 1. **自定义指令**：...
详解VUE中v-bind的基本用法
08-29
Vue 中 v-bind 的基本用法详解 在 Vue 中，v-bind 是一个非常重要的指令，它用于将数据绑定到 HTML 元素的属性上。本篇文章将详细介绍 v-bind 的基本用法，包括 v-bind:class 和 v-bind:style 两个方面。 v-bind:...
Vue 指令v-bind和v-on
weixin_42695446的博客
12-02 6520
Vue2 指令v-bind和v-on 从这篇文章开始，总结一下Vue中的指令。这篇文章总结v-bind和v-on指令。 （1）v-on： 1.v-on可以接受一个参数，在v-on后面用冒号表示。这里的参数是监听的事件名称。 可以用v-on添加一个事件监听器，通过它调用在Vue实例中的方法： &amp;amp;amp;amp;lt;div id=&amp;amp;amp;quot;app&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &
学习vue的第二天 v-bind的进阶用法
qq_34176561的博客
05-19 231
今天学习了vue中的v-bind进阶用法 v-bind:style v-bind:key v-bind:class 代码展示的是通过 :class给标签动态加入或删除class名 接着是给按钮添加取反方法和封装一个函数对象 按钮修改上方span标签的颜色，黑黄切换 v-bind 和 v-for结合可以做很多实质性的功能，比如tab切换， 下方是实现从citys中遍历对象到页面中，之后用@click给点中的元素添加样式来实现变色 指令的值不仅可以直接写数据，比如：<h3 :style=
7. 小程序的事件绑定
一个超可爱的账号
06-29 762
小程序中绑定事件，通过bind关键字来实现。如：bindtap、bindinput、bindchange等. bindtap 相当于 vue中的@click点击事件 bindtab 是输入框输入事件 bindchange 是 不同的组件支持不同的事件，具体看组件的说明即可。 注意：无法在小程序当中的事件中直接传递参数，需要通过自定义属性的方式来传递参数 <input value="" bindinput="handleInputMethod"/> <button bindt
vue.js指令与事件(v-bind)
Code_Pupil的博客
03-24 707
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
vue属性绑定：v-bind指令
wuliangfan的博客
07-18 5084
1. 基本语法 语法： v-bind:属性名.修饰符="属性值" 简写： ：属性名.修饰符 = "属性值" 属性名 h5中有意义的属性名 DOM属性名(className,innerHTML) ==>将驼峰转为连字符“-”，并添加修饰符.prop vue绑定属性时是以html属性为基准的,h5中是不存在大小写的 属性值： data数据仓库中的变量名 修饰符： prop...
Vue之v-bind快速学习
tanx的博客
04-24 7516
vue v-bind学习
【Vue】v-bind的使用
天亮就睡
09-09 181
v-bind用于将html标签属性交给vue实例管理，这样就可以通过vue来动态修改html标签属性了 v-bind: 可以用:来代替，如v-bind:src=""可以写成:src="" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind</title> <style> .bgblue
详解VueJs中的V-bind指令
08-31 2958
引子 v-bind 主要用于属性绑定，Vue官方提供了一个简写方式 :bind，例如： &amp;lt;!-- 完整语法 --&amp;gt; &amp;lt;a v-bind:href=&quot;url&quot;&amp;gt;&amp;lt;/a&amp;gt; &amp;lt;!-- 缩写 --&amp;gt; &amp;lt;a :href=&quot;url&quot;&a
vue下的@change事件
热门推荐
bingguang1993的博客
09-25 5万+
楼主最近在项目中实践了一下vue，期间遇到了一些坑，现在记录一下 先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="v...
【mpvue】vant小程序slider组件bindchange函数
Kamen_Yip的博客
01-09 2798
mpvue中使用vant的slider组件 发现绑定的change函数无效
vue v-bind使用
最新发布
08-04
例如，我们可以使用v-bind:title来将Vue实例中的tit数据绑定到元素的title属性上，实现属性值的动态更新。具体用法如下： ```html <h1 v-bind:title="tit">this is test ``` 另外，v-bind指令还有一个简写形式，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值