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

vue 的 v-for 循环 v-if 判断 v-model 双向绑定的一些列基础

2018-11-05 17:29 716 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ name }}== {{age}}</p>
<p>{{ nsg }}</p>
<p>{{ arr }}</p>
<p>{{ obj2 }}</p>
<input type="text" v-model="nsg">
<!--model 用于表单双向绑定-->
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
<!--v-for="item in arr"  循环  自生成-->
<ul>
<li v-for="(v,k) in arr">{{v}}==={{k}}</li>
<!--  数组 v  value值    k 索引-->
</ul>

<ul>
<li v-for="(v,k) in abj">{{v}}==={{k}}</li>
<!--v  值    k 鉴-->
</ul>

<ul>
<li v-for="(v,i) in obj2">{{v}}==={{i}} =={{v.names}}=={{v.age}}</li>
<!--v  值    k 索引-->
</ul>

<ul>
<li v-for="v in obj2">{{v.names}}=={{v.age}}</li>
<!--v  值    k 索引-->
</ul>

<button @click="action">click</button>
<button v-on:mouseover="action2" @mouseout="action3">mouseover</button>
<!--   v-on  同于   @   -->

<button v-show="flags">show</button>
<!--flags 为flase  消失-->

<p v-if="age>30">{{age}}</p>
<p v-else="age>30">{{flags}}</p>
<!--show 和 if 区别    show 不占位置   if  位置依然在 -->

</div>

<script>
new Vue({
el:"#app",
data:{
name:"aaaa",
nsg:"hallo word",
age:20,
flags:true,

arr:["a","b","c","d","e"],
abj:{
id:1,
namespace:"bbbbb",
},
obj2:[{
names:"zzz",
age:"20"
},{
names:"xxx",
age:"30"
}]
},
methods:{                                // 里面专属 放方法
action:function () {
this.nsg = "aaaaaaaaaaaaaaaaaa"
},
action2:function () {
this.age = "90"
},
action3:function () {
this.age = "190"
}
}
})
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

vue 的 v-for 循环 v-if 判断 v-model 双向绑定 的一些列基础

vue 的 v-for 循环 v-if 判断 v-model 双向绑定的一些列基础