v-for
用于遍历
关键语法:v-for="(item, index) in arr " , 其中,item为具体的项,index为索引,如果是对象数组,
item为具体的对象,想要访问对象的属性,需要添加 item.属性
<body>
<div id="app">
<ul>
<li v-for="(item, index) in arr" :title="item">这会被重复{{index}}{{item}}{{arr[index]}}</li>
<li v-for="(item, index) in objArr">名字:{{item.name}},年龄:{{item.age}}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
objArr:[
{name:"jack",age:18},
{name:"rose",age:48}
]
}
})
</script>
</body>
v-on补充
传递自定义参数,事件修饰符
@keyup.enter="method",限制触发条件为 回车键
<body>
<div id="app">
<input type="button" @click = "dolt(12,'dd')"/>
<input type="text" @keyup.enter="sayHi">
</div>
<script>
var app = new Vue({
el:"#app",
methods:{
dolt:function (p1,p2) {
console.log("做It");
console.log(p1);
console.log(p2);
},
sayHi:function () {
alert("做了吗");
}
}
})
</script>
</body>
v-model
双向绑定,可以设置和获取表单元素的值,绑定的数据会和表单元素值相关联
<body>
<div id="app">
<input type="button" @click="setMessage">
<input type="text" v-model="message" @keyup.enter="getMessage"/>
<h2>{{message}}</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"黑马程序员"
},
methods:{
getMessage:function () {
alert(this.message);
},
setMessage:function () {
this.message = "库定义";
}
}
})
</script>
</body>
简单的应用,记事本
<body style=" width: 50%;margin: auto;">
<!-- 主体区域 -->
<section id="todoApp" style="background-color: #4CAF50;">
<!--输入框-->
<header class="header">
<h1>小黑记事本</h1>
<input autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
class="new-todo" v-model="message" @keyup.enter="addItem"/>
</header>
<!--列表区域-->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{index +1 }}</span>
<label>{{item}}</label>
<button class="destroy" @click="deleteItem(index)">x</button>
</div>
</li>
</ul>
</section>
<!--统计和清空-->
<footer class="footer" v-if="list.length!=0">
<span class="todo-count">
<strong>{{list.length}}</strong>
item left
</span>
<button class="clear" @click="clear">
clear
</button>
</footer>
</section>
<!--底部-->
<footer class="info">
</footer>
<script>
var todoApp = new Vue({
el:"#todoApp",
data:{
list:["写代码","吃饭饭","睡觉觉"],
message:""
},
methods:{
addItem:function () {
this.list.push(this.message);
},
deleteItem:function (index) {
this.list.splice(index,1);
},
clear:function () {
this.list = [];
}
}
})
</script>
</body>