Vue.js 核心理念：数据驱动页面
2016-12-24 本文已影响0人
zhangriverxu
要点：
-
v-on:click="dosomething"，点击每个地方，让数据发生改变。这个something可以是article.fontSize+=5 -
v-if=“condition”条件控制，condition为TRUE才执行一段代码，以此来实现状态的调整
一 用v-on：click现实调整字号
1.1 Step1
在<style></style>中有花括号来修改字体大小（注意<style></style>要想被驱动，必须放置在<body></body>中）：
p {
font-family: 'Raleway', sans-serif;
font-size:{{ article.fontSize }}px;
}
1.2 Step2
在<body></body>中添加增大字号的按钮：
<div class="ui segment padded container">
<button v-on:click="article.fontSize+=5" class="ui top left attached label" type="button" name="button">
+
</button>
<h1>{{ article.content }}</h1>
<p>
{{ article.content }}
</p>
</div>
1.3 Step3: 在article中添加在一个fontSize的对象
<script>
var vm = new Vue({
el:"#app",
data:{
article:{
title:"This is a title",
content:"Hi there",
fontSize:18 #新增
}
},
comment:[
{name:"John Doe",said:"Great!",show:true},
{name:"John Doe",said:"Great!",show:true},
{name:"John Doe",said:"Great!",show:true},
{name:"John Doe",said:"Great!",show:true},
]
})
</script>
二 用v-if实现评论屏蔽
首先来看看Vue.js 中的if控制与Django中的if控制写法的异同，最大的区别是Vue.js把if套在div标签中，且不用谢endif。
v-if.png
2.1 Step1: 为评论添加一个状态
为每一条评论添加一个状态，默认状态是现实，当v-on:click中后，comments.show=!comments.show
comments:[
{name:"John Doe",said:"Great!"},
{name:"John Doe",said:"Great!"},
{name:"John Doe",said:"Great!"},
{name:"John Doe",said:"Great!"},
]
2.2 Step2: 修改html中评论区的代码
点击spam这个标签就把show:true变为show:false。当show:false时候，评论去现实内容为Opps。
<div v-for="comment in comments" class="ui comments">
<div class="comment" v-if="comment.show">
<div class="avatar">
<img src="images/matt.jpg" alt="" />
</div>
<div class="content">
<a href="#" class="author">{{ comment.name }}</a>
<p class="text" style="font-family: 'Raleway', sans-serif;">
{{ comment.said }}
</p>
<div class="actions">
<a v-on:click="comment.show = !comment.show" href="#">spam</a>
</div>
</div>
</div>
<div v-else class="comment">
<h3 class="ui sub header">Opps</h3>
</div>
</div>
