条件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>条件与循环</title>
<script type="text/javascript" src="../img/vue.js" ></script>
</head>
<body>
<div>
<span id="app-3">
<p v-if="seen">
{{message}}
</p>
</span>
</div>
<script>
new Vue({
el:"#app-3",
data:{
seen:true,
message:"nice!"
}
})
</script>
</body>
</html>
循环
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../img/vue.js" ></script>
</head>
<body>
<div id="app-4">
<ol>
<li v-for=" todo in values">
{{ todo.text}}
</li>
</ol>
</div>
<script>
var app4=new Vue({
el:"#app-4",
data:{
values:[
{text:'学习 js'},
{text:'学习vue.js'},
{text:'整个牛项目'}
]
}
})
</script>
</body>
</html>
总结
通过script标签构建模板对象vue({}),对象通过el属性绑定需要渲染的div,通过v-指令进行标签的渲染,{{}}进行值的填入.