vue系列教程（二）常用指令01
程序员文章站
2022-03-03 09:17:11
...
1.什么是指令?
用来扩展html标签的功能
1.1 v-model 双向数据绑定，一般用于表单元素
用法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用指令v-model</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
new Vue({
el:'#itany',//Vue2.0中不允许将vue2.0实例挂在到<html>或<body>元素，在vue1.0中是可以的
data:{
name:'',
age:21,
flag:true,
nums:[12,2,23,5],
user:{id:9521,name:'唐伯虎'},
}
})
}
</script>
</head>
<body>
<div id="itany">
用户名:<input type="text" v-model="name"/><br/>
{{name}}<br/>
{{age}}<br/>
{{flag}}<br/>
{{nums}}<br/>
{{user}}<br/>
</div>
</body>
</html>
1.2 v-for对数组进行循环
用法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用指令v-for</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
new Vue({
el:'#itany',//Vue2.0中不允许将vue2.0实例挂在到<html>或<body>元素，在vue1.0中是可以的
data:{
arr:[12,23,1,3,45,2,6],
users:[
{id:12,name:'张三',age:13},
{id:21,name:'李四',age:23},
{id:33,name:'王五',age:33}
],
arr2:[12,1,3,45,56,12]
}
})
}
</script>
</head>
<body>
<div id="itany">
<ul>
<!--普通循环-->
<!--循环数组-->
<!--<li v-for="value in arr">{{value}}</li>-->
<!--循环对象-->
<!--<li v-for="value in user">{{value}}</li>-->
<!--键值对循环-->
<!--<li v-for="(v,k) in user">{{k}}={{v}}</li>-->
<!--循环包含重复数据的集合,可以通过指定:key属性绑定唯一的key,当更新元素时可重用元素，提高效率-->
<!--<li v-for="(v,k) in arr2" :key="k">{{v}}</li>-->
<li v-for="(user,index) in users">
序号:{{index+1}}
id:{{user.id}}
姓名:{{user.name}}
年龄:{{user.age}}
</li>
</ul>
</div>
</body>
</html>
github代码下载地址:https://github.com/xiangjianming/vueStart.git
上一篇： vue.js常用指令
下一篇： Vue.js的v-指令