您的位置：首页 > Web前端 > Vue.js

vue系列教程（二）常用指令01

2020-01-14 05:00 316 查看

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}}&nbsp;&nbsp;&nbsp;&nbsp;
id:{{user.id}}&nbsp;&nbsp;&nbsp;&nbsp;
姓名:{{user.name}}&nbsp;&nbsp;&nbsp;&nbsp;
年龄:{{user.age}}&nbsp;&nbsp;&nbsp;&nbsp;
</li>
</ul>
</div>
</body>
</html>

github代码下载地址:https://github.com/xiangjianming/vueStart.git

  • 点赞
  • 收藏
  • 分享
  • 文章举报
小明哥带你飞 发布了63 篇原创文章 · 获赞 0 · 访问量 1095 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航