前言
学习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指令的用法