vue中的bind

最新推荐文章于 2023-10-20 22:06:56 发布
最新推荐文章于 2023-10-20 22:06:56 发布
阅读量99 收藏
点赞数
文章标签： 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

weixin_30849403
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解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】Vue中v-bind的使用
一只洒鹿
06-24 1万+
Mastache语法不能作用于HTML特性上，遇到这种情况应该去使用v-bind指令 对于布尔特性，它比较特殊，他们只要存在就意味着值为true， v-bind:disabled使用要特别注意下 <button v-bind:disabled = "isButtonDisabled">我是被vue控制的按钮</button> 上面的代码中，如果isButtonDisabled的值是null、undefined或者false，则disabled特性甚至不会被包含在渲染出来的
五、vue基础-指令之v-bind
Sean_0819的博客
04-19 7496
前面要讲的一系列指令，主要是将值插入到模板内容中。但是，除了内容需要动态来决定外，某些我们也希望动态来绑定。
总结一下vue中v-bind的常见用法
最新发布
罗铠威的博客
10-20 932
本篇博客主要总结一下v-bind命令在vue中的常见用法。
vue3中常用的指令之v-bind和v-on
qq_44482048的博客
01-16 7013
vue3中常用指令之v-bind和v-on
Vue.js绑定属性v-bind
tanxinji的博客
12-24 3733
将标签内的属性值绑定，使其在Vue对象内可以动态修改属性值。使用的就是v-blind:属性名 = "vue变量名" 来将属性绑定。可以缩写为:属性名 = "vue变量名"。如果只是纯文本的话就需要单引号括起来表示一个字符串而不是一个变量。 变量名可以有很多，如: href,src,name,class,style等等。 :属性名 = "vue变量名" 。 注意:" "里的变量需要是vue中存在的，vue的帮助下会自动替换为变量名所对应的值。 代码实...
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-bind:class的选项卡方法
10-17
在Vue.js框架中，`v-bind:class`指令用于动态地绑定一个或多个CSS类到元素。这个特性使得我们可以根据组件的数据状态来切换元素的样式，从而实现动态UI效果。在本例中，我们将学习如何使用`v-bind:class`实现一个...
Vue.js 中的 v-bind 指令详解
it_xushixiong的博客
06-09 2642
Vue.js中的v-bind指令是一种将组件的属性绑定到Vue实例的数据的方式。v-bind指令可以用于将任何组件属性绑定到Vue实例的数据上，例如class、style、属性等。v-bind指令允许我们动态地设置组件的属性，从而使组件更加灵活和可重用。v-bind指令可以使用简写形式进行使用，即通过添加一个前缀符号，例如:class:style等。这使得代码更加简洁和易于阅读。在本文中，我们将深入探讨v-bind指令的使用方法和一些实际的代码示例。
Vue 常用指令 v-bind 设置、绑定元素属性
小楼一夜听春雨，深巷明朝卖杏花
07-05 3496
用于动态绑定一个或多个属性值，或者向另一个组件传递props值(这个后面再介绍)，应用场景:图片地址src、超链接href、动态绑定一些类、样式等等。使用v-bind是因为html标签里面有很多的属性值不是写死的，它也是一个动态的值，是一个变量。data里面定义的属性可以在整个view实例里面去使用，这个是要用this的。v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。使用了v-bind之后，引号里面的就不再是字符串了，而是引用的变量了。使用v-bind就可以在属性里面传递变量了，
VUE语法 -bind
m0_47236916的博客
05-02 371
V-bind语法 v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值。 图片的链接src、网站的链接href、动态绑定一些类、样式等等 比如通过Vue实例中的data绑定元素的src和href，代码如下 <div id="app"> <!-- 错误的做法: 这里不可以使用mustache语法--> <!--<img src="{{im...
vue之v-bind
m0_72694993的博客
09-06 498
1.可以通过key值的方式来决定样式是否执行，通过data中的数据的值u来决定是否执行样式，例如如下代码中isa为true所以class1的样式会执行，isb为false所以class2的样式不会执行。3.还可以给样式直接绑定其数值，如下代码直接给style绑定了数值,此标签高为500px 宽200px，值得注意的是这个方法也是通过绑定对象的方式进行绑定。2.通过数组进行绑定，当我们绑定多个样式的时候也可以通过数组进行绑定，如以下代码就用数组的方式把样式绑定给标签。二、v-bind的其他用法。
vue：v-bind动态绑定
前端之行，任重道远！
04-24 1091
一，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指令基本用法和介绍
热门推荐
qq_41196217的博客
05-25 4万+
Vue中的v-bind指令基本用法和介绍 v-bind指令主要用于响应式的更新html属性 一般我们要想在元素节点的属性上绑定vue的data数据 是不可以直接使用{{ }}插入值语法来使用 <h1 title="{{tit}}">Hello World</h1> <!-- 以下假设是我们定义的data对象 拥有一个data数据tit 如果我们使用插值的形式 那么实际页面提示的title信息是{{tit}} 而不是this is title --&
Vue中v-bind,v-on,v-model都是干什么的(区别以及详细用法)?自制动图,一看就懂 ∠( °ω°)／ 前端知识
寻觅的博客
06-20 2万+
文章目录区别详细用法属性绑定(`v-bind:`或`:`)单值绑定多值绑定绑定style双向绑定(`v-model`)元素绑定修饰符 区别 v-bind:属性绑定(简写:), v-on:事件绑定(简写@), v-model:双向绑定(简写v-model,看下方的代码你就知道简写在哪了)。 v-bind与v-model都是绑定vue中data中的属性的,他们最主要的区别是v-bind的绑定只是单向的,他会将data中的数据投影到绑定的地方,在被绑定的地方对数据修改时,data中的原始数据是不会改变的,而v-m
vue-bind 使用
魏晋-
04-19 3328
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 244
v-bind 指令 动态地绑定一个或多个特性 :后的为传递的参数 <!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 动态特性名 (2.6.0+) --> <button v-bind:[key]="value"></button> <!-- 缩写 --> <img :src="imageSrc"> <!-- 动态特性名缩写 (2.6.0+) --> &
vue中v-bind
07-28
v-bind指令用于在Vue中实现属性的动态绑定。它可以将一个或多个attribute，或者一个组件prop动态绑定到表达式。在Vue中，v-bind可以使用简写形式，即使用冒号(:)来代替v-bind指令。例如，可以使用v-bind或者简写形式:来绑定一个img标签的src属性，如下所示： ``` <img v-bind:src="imageSrc"> ``` 或者简写为： ``` <img :src="imageSrc"> ``` 需要注意的是，在属性值内不能直接使用插值操作，例如不能直接写入类似于`<h1 :style="font-size:50px;color:red;">this is test</h1>`的语法。如果想要在元素节点的属性上绑定Vue的data数据，需要使用v-bind指令。例如，可以使用v-bind指令将data中的tit数据绑定到h1标签的title属性上： ``` <h1 v-bind:title="tit">this is test</h1> ``` 这样，h1标签的title属性就会与data中的tit数据进行绑定，实现了属性的动态更新。 #### 引用[.reference_title] - *1* [【Vue】Vue中v-bind的使用](https://blog.csdn.net/weixin_34727238/article/details/106949433)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Vue中的v-bind指令基本用法和介绍](https://blog.csdn.net/qq_41196217/article/details/117253289)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值