您的位置：首页 > 产品设计 > UI/UE

vue学习01--v-bind:title/v-if/v-for

2017-11-02 10:19 585 查看

[以下代码/截图均默认已引用vue.js]

1、数据和 DOM
关联

<div id="app-2">
{{mess}}
<br /><br />
<span v-bind:title="tips">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<br />
<script type="text/javascript">
var app2 = new Vue({
el: '#app-2',
data: {
mess:"this is an example",
tips: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>

2、v-bind称之为指令

指令带有前缀 v-，表示是由 Vue提供的专用属性。

3、条件与循环（v-if，v-for）

v-if

v-for

<div id="demo">
<ol id="ol1" class="body">
<li v-for="site in sites">
{{site.name}}
</li>
</ol>
<ol id="ol2" class="body">
<li v-for="(value,key,i) in jsons">
{{value}}的key值是{{key}},下标是{{i}}
</li>
</ol>
</div>
<script type="text/javascript">
var a1 = new Vue({
el:"#demo",
data:{
sites:[
{name:"name-a"},
{name:"name-b"},
{name:"name-c"}
],
jsons:{a:"apple",b:"banana",c:"pear"}
}
})
a1.sites.push({name:"name-d"})
</script>

4、关于v-for：

第3点中已有一个例子。而它还有其他写法，如把 v-for="item in items" 改写为 v-for="item of items"

而对于一个对象的v-for：

也可以用
v-for
通过一个对象的属性来迭代。

<ul id="v-for-object" class="demo">
<li v-for="value in objects">
{{ value }}
</li>
</ul>
<script type="text/javascript">
var a1 = new Vue({
el:"#v-for-object",
data:{
objects:{
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
</script>

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

标签： vue

相关文章推荐

新的分享

章节导航

vue学习01--v-bind:title/v-if/v-for

1、数据和 DOM关联

2、v-bind称之为指令

3、条件与循环（v-if，v-for）

4、关于v-for：

1、数据和 DOM
关联