首先讲下v-for
<meta charset="utf-8">
<!--1.引入vue.js-->
<script src="js/vue.js"></script>
<title> vue的实例</title>
</head>
<body>
<!--2. 指定一个div层，用于绑定vue实例-->
<div id="app">
<!--v-pre:不编译模板语法，直接显示-->
<p v-pre>{
{msg}}</p>
<hr />
<!--显示所有数组中的数据-->
<p v-for="item in items">{
{item}}</p>
<hr />
<p v-for="val in values">{
{val}}</p>
<hr />
<p v-for="(val,key) in values">{
{key}}-{
{val}}</p>
<hr />
<p v-for="(stu,index) in students">{
{index}}-{
{stu.score}}</p>
<hr />
<!--v-bind:动态把数据绑定到html属性中，属性不能用{
{}}取值-->
<select>
<option v-for="obj in objects" v-bind:value="obj.value">{
{obj.text}}</option>
</select>
<br/><br/><br/><br/><br/>
</div>
</body>
<!--3. 创建vue实例-->
<script>
var vm=new Vue({
el:"#app",
data:{
msg:100,
items:[10,20,30,40,50], // 数组类型
values:{
// json
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
},
students:[ //数组+json
{
score:50},
{
score:80},
{
score:60},
{
score:90}
],
objects:{
// json+json
city1:{
text:'请选择',value:-1},
city2:{
text:'湖南',value:1},
city3:{
text:'北京',value:2},
}
}
})
</script>
可以正常打印
然后是v-if
很简单 看官方文档就能一下子理解,这里写个小案例
<div class="box">
<br/><br/><br/><br/>
<button v-on:click="toggle($event)">显示切换</button>
<!-- 默认true显示 false隐藏 -->
<div v-if="toggleValue" class="test" style="width: 100px;height: 100px;background-color: #009E94;"></div>
<p>结果为:{
{toggleValue}}</p>
</div>
<script>
const vm = new Vue({
el:".box",
data:{
toggleValue:true
},
methods:{
// 方法
toggle(event){
if(this.toggleValue==true){
this.toggleValue = false;
}
else{
this.toggleValue = true;
}
}
}
})
</script>
最后是switch
<div class="box">
<input type="text" v-model="num1" />
<select v-model="type">
<option v-for="num in nums" :value="num.value">{
{num.text}}</option>
</select>
<input type="text" v-model="num2" />
<button v-on:click="math($event)">计算</button>
<p>结果为:{
{sum}}</p>
</div>
<script>
const vm = new Vue({
el:".box",
data:{
nums:{
type1:{
text:'加法',value:0},
type2:{
text:'减法',value:1},
type3:{
text:'乘法',value:2},
type4:{
text:'除法',value:3}
},
num1:0,
num2:0,
type:0,
sum:0
},
methods:{
math(event){
switch(this.type){
case 0 :this.sum=parseInt(this.num1)+parseInt(this.num2); break;
case 1 :this.sum=parseInt(this.num1)-parseInt(this.num2); break;
case 2 :this.sum=parseInt(this.num1)*parseInt(this.num2); break;
case 3 :this.sum=parseInt(this.num1)/parseInt(this.num2); break;
}
}
}
})
</script>
共勉