vue中的bind

最新推荐文章于 2025-06-20 09:36:14 发布
最新推荐文章于 2025-06-20 09:36:14 发布
阅读量138 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： python javascript ViewUI
原文链接：http://www.cnblogs.com/chvv/p/9683670.html 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>

	<div id="comp">
		<p>{{msg}}</p>
		<p>{{msg.split('')}}</p>
		<p>{{ msg.split('').reverse()}}</p>
		<p>{{ msg.split('').reverse().join()}}</p>
		<p>{{ msg.split('').reverse().join('')}}</p>

		<p>{{ reverseStr }}</p>
		<button @click='clickHandel'>更改</button>
	</div>


	<form id="okk" action="">
		<h5>单行文本：</h5>
		<input type="text" v-model="msg" placeholder="请输出用户名">
		<input type="number" v-model="msg">
		<p>{{msg}}</p>

		<h5>多行文本</h5>
		<textarea name="" id="" cols="30" rows="10" v-model="msg2"></textarea>
		<p>{{msg2}}</p>
		<h5>单个复选框</h5>
		<input type="checkbox" v-model="checked">
		<label for="checkbox">{{checked}}</label>
		<h5>多个复选框</h5>
		<input type="checkbox" value="读书" v-model="checkedNames">
		<label for="">读书</label>
		<input type="checkbox" value="音乐" v-model="checkedNames">
		<label for="">音乐</label>
		<input type="checkbox" value="旅游" v-model="checkedNames">
		<label for="">旅游</label>
		<p>Checked names: {{ checkedNames }}</p>
		<h5>单选按钮</h5>
		<input type="radio" value="男" v-model="radioed">
		<label for="">男</label>
		<input type="radio" value="女" v-model="radioed">
		<label for="">女</label>
		<p>{{radioed}}</p>
		<h5>单选框</h5>
		<select name="" id="" v-model="selected">
			<option >python</option>
			<option >django</option>
			<option >web</option>
			<option >java</option>
		</select>
		<p>{{selected}}</p>
		<h5>多选框</h5>
		<select name="" id="" v-model="mulselected" multiple>
			<option >python</option>
			<option >django</option>
			<option >web</option>
			<option >java</option>
		</select>
		<p>{{mulselected}}</p>
		
		
	</form>
	<h5>for循环option</h5>

	<form action="" id="okk1" >
	<select name="" v-model=mulsel>
		<option v-for='option in options' v-bind:value="option.value">
			{{option.text}}
		</option>
	</select>
	<p>{{mulsel}}</p>
	</form>

	<script>


		new Vue({
			el:'#comp',
			data:{
				msg:'学习Vue.js',
				text:'好好学习，天天向上',
				text2:'python.django,vue',
			},
			methods:{
				clickHandel(){
					this.text = '阿里巴巴';
					this.reverseStr = 'javac++'
				}
			},
			computed:{
				reverseStr:{
					// return this.text.split('').reverse().join(''),
					set:function (newValue) {
						this.text2 = newValue
					},
					get:function () {
						return this.text2.split('').reverse().join('');
					}
				}
			},

		})


		new Vue({
			el:'#okk',
			data:{
				msg:'',
				msg1:'学习学习',
				msg2:'Vue.js学习\nwww.vue.js.com',
				checked:'',
				checkedNames:[],
				radioed:'',
				selected:'',
				mulselected:[],
			}
		})

		new Vue({
			el:'#okk1',
			data:{
				mulsel:'vue',
				options:[
					{text:1,value:'vue'},
					{text:2,value:'js'},
					{text:3,value:'go'},
				]
			}
		})
	</script>
	
</body>
</html>

　　

转载于:https://www.cnblogs.com/chvv/p/9683670.html

Vue指令 - v-bind(:)
资深程序员
07-22 4863
v-bind定义 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 HTML Css属性可以使用v-bind指定绑...
详解vue中v-bind:style效果的自定义指令
10-15
在Vue中，`v-bind:style` 是一个用于动态绑定CSS样式的指令，它可以接受对象或字符串，方便地根据数据变化更新元素的样式。而自定义指令则是Vue提供的一种扩展机制，允许开发者自定义DOM操作。 1. **自定义指令**：...
vue中v-bind
cmolong的博客
03-08 701
vue的属性绑定一般都用v-bind ，可以简写 : 。 例如： &amp;amp;amp;amp;amp;amp;lt;h1 v-bind:class=“hd” &amp;amp;amp;amp;amp;amp;gt;test v-bind &amp;amp;amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;h1 v :class=“hd” &amp
详解 Vue 的 v-bind 指令
最新发布
分享各类领域技术问题
06-20 513
详解 Vue 的 v-bind 指令
vue-bind 使用
魏晋-
04-19 3360
v-bind属性绑定属性和样式 （1）绑定属性 <button class = "btn" :style="{ color:'white',background:'blue' }"> 点击 </button> （2）绑定样式 <button class = "btn" :style="{ color:'style' }"> 点击 </butt...
Vue------------ bind指令学习
qq_41962068的博客
09-22 307
v-bind 指令 动态地绑定一个或多个特性 :后的为传递的参数 <!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 动态特性名 (2.6.0+) --> <button v-bind:[key]="value"></button> <!-- 缩写 --> <img :src="imageSrc"> <!-- 动态特性名缩写 (2.6.0+) --> &
Vue.js 中的 v-bind 指令：作用与使用详解
My_wife_QBL的博客
07-05 6320
在 Vue.js 中，指令是以v-前缀开头的特殊属性。指令的值可以是 JavaScript 表达式，用于在 DOM 元素上添加特定的行为。v-bind指令是 Vue.js 中用于动态绑定 HTML 属性和组件属性的重要指令。通过v-bind指令，可以将 Vue 实例中的数据动态地绑定到 HTML 元素的属性上，从而实现数据的动态更新和响应式渲染。v-bind指令的基本用法包括绑定 HTML 属性、绑定组件属性和绑定动态属性。高级用法包括绑定对象、绑定数组和绑定计算属性。在实际开发中，v-bind。
Vue v-bind动态绑定class实例方法
10-15
在Vue中，`v-bind`指令是用于动态地绑定属性到元素。在这个特定的场景中，我们关注的是如何使用`v-bind`来动态绑定`class`，这是一个非常实用的功能，允许我们在运行时根据数据的变化改变元素的CSS类。 动态绑定`...
vue里面v-bind和Props 利用props绑定动态数据的方法
10-18
在Vue.js框架中，`v-bind` 和 `props` 是两个关键的概念，它们主要用于在父组件和子组件之间传递数据。本文将详细讲解如何利用 `v-bind` 和 `props` 来绑定动态数据。 首先，`v-bind` 是Vue的一个指令，它的作用是...
详解vue中v-model和v-bind绑定数据的异同
10-14
本篇文章将深入解析Vue中的两种主要数据绑定方式：`v-model` 和 `v-bind`，以及它们之间的异同。 `v-bind`（通常简写为 `:`）主要用于单向数据绑定，即将Vue实例中的数据属性绑定到HTML元素的属性上。例如，使用 `v...
VUE语法 -bind
m0_47236916的博客
05-02 446
V-bind语法 v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值。 图片的链接src、网站的链接href、动态绑定一些类、样式等等 比如通过Vue实例中的data绑定元素的src和href，代码如下 <div id="app"> <!-- 错误的做法: 这里不可以使用mustache语法--> <!--<img src="{{im...
vue中的v-bind
少油少盐不要辣
12-22 284
v-bind的特性 v-bind绑定HTML属性 v-bind绑定DOM属性时，要加修饰符.prop，遇到绑定小驼峰式的属性，如innerHTML时，用连字符即：v-bind.prop:inner-html=属性值。 绑定style 绑定class ...
Vue v-bind
小牛牛的博客
02-15 2366
图片处理<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <script type="text/javascript"> window.onload = fun
vue提供的v-bind()函数
liang_si_bo的博客
09-13 294
这是vue提供的CSS函数，目的是能够更简洁的通过代码动态实现CSS属性的绑定。实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。
第六节:Vue指令:v-bind动态属性绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
05-10 5129
上一小节的学习,让我们理解以v开头的指令后面跟的将是表达式,同样标签也有一些合法的标签属性.如果想将这些属性的值变为表达式,我们可以使用Vue提供的v-bind:指令.因为动态属性style的值是一个对象,因此 我们可以把对象提取出来直接作为vue 数据data属性值,那么我们就可以直接绑定一个对象就可以了。动态绑定class 就是使用v-bind指令来绑定, 一但使用v-bind指令后,class属性的值不在是一个字符串,而是一个表达式,但是一旦使用了动态绑定, `style`属性的值将变成JS表达式,
vue.js 中v-bind指令的使用
qq_34928693的博客
11-30 1380
v-bind是处理HTML中的标签属性的。 例如： html:&lt;div id=&quot;#app&quot;&gt; &lt;a v-bind:href='url'&gt;&lt;/a&gt; &lt;/div&gt;js:var app=new Vue({ el:'#app', data:{ url:'www.baidu.com' } })缩写：&lt;a :
vue：v-bind动态绑定
前端之行，任重道远！
04-24 1169
一，v-bind介绍 二，v-bind实践 <body> <div id="app"> <!-- 错误做法 --> <!-- <img src="{{imgURL}}" alt=""> --> <img v-bind:src="imgURL" alt=""> <a v-bind:href="aHref">百度一下</a> &
详解VUE中v-bind的基本用法
热门推荐
码农之路
08-23 1万+
1. v-bind:class（根据需求进行选择） 1.1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...
【Vue】`v-bind` 指令详解：动态绑定属性的强大工具
lph159的博客
07-19 2293
v-bind是 Vue.js 提供的指令之一，用于动态绑定 HTML 属性。它的基本语法如下：
vue 中v-bind
06-05
### Vue.js 中 v-bind 的用法及示例 `v-bind` 是 Vue.js 中的一个核心指令，用于动态绑定 HTML 元素的属性或组件的 prop 到 Vue 实例的数据上。它支持多种用法，包括绑定类名、样式、链接等，并且可以通过简写形式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值