vue基础之v-bind指令与v-model指令

最新推荐文章于 2023-05-23 18:03:09 发布

一杯雪花勇闯天涯

最新推荐文章于 2023-05-23 18:03:09 发布

阅读量390

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u014265398/article/details/109037993

版权

vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

文章目录

前言
一.v-bind指令
二.v-model指令
- 1.作用
- 2.示例
总结

前言

学习v-bind指令和v-model指令

一.v-bind指令

1.作用

绑定标签的属性名

2.当标签的属性值是不确定的，是可以修改的

3.语法

  v-bind:要绑定的属性名=“data中的数据”

4.简写方式，直接去掉v:bind,比如：

<p :id={{id}}></p>

2.实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{
				list-style: none;
				width:100%;
				height: auto;
			}
			ul li{
				width:15%;
				height: 12rem;
				text-align: center;
				float: left;
				margin-top: 1rem;
				border-radius: 3rem;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul :id="id">
				<li v-for="(v,k,i) in list" :key='i'>
					<img v-bind:src="src" alt="this is a image" width="200" v-on:click="fn(v.id)"/>
				</li>
			</ul>
			
		</div>
	</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	var vm = new Vue({
		el:"#app",
		data:{
			id:"zq",
			src:'image/girl.jpg',
			list:[
				{id:1},
				{id:2},
				{id:3},
				{id:4},
				{id:5},
				{id:6},
				{id:7},
				{id:8},
				{id:9},
				{id:10},
				{id:11},
				{id:12},
				{id:13},
				{id:14},
				{id:15},
				{id:16},
				{id:17},
				{id:18},
			
			]
		},
		methods:{
			fn:function($event) {
				alert(JSON.stringify($event));
			}
		}
	});
</script>

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

二.v-model指令

1.作用

表单元素的绑定，其实绑定的是表单元素的value值，v-model会忽略表单元素的value、checked、selected特性的初始值二总是讲vue实例的数据作为数据源
语法

  <input v-model='data中的数据'/>

2.示例

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model</title>
	</head>
	<body>
		
		<div id="app">
			<input type="text" v-model="message" />
		</div>
	</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			message:"既然选择远方，风雨兼程",
		}
	});
</script>

效果:
在这里插入图片描述

总结

vue基础之v-bind指令的用法以及v-model指令的用法

一杯雪花勇闯天涯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue基础之v-bind指令与v-model指令

文章目录前言一.v-bind指令1.作用2.当标签的属性值是不确定的，是可以修改的3.语法4.简写方式，直接去掉v:bind,比如：2.实例二.v-model指令1.作用2.示例总结前言学习v-bind指令和v-model指令一.v-bind指令1.作用绑定标签的属性名2.当标签的属性值是不确定的，是可以修改的3.语法 v-bind:要绑定的属性名=“data中的数据”4.简写方式，直接去掉v:bind,比如：<p :id={{id}}></p>2.实
复制链接

扫一扫