Vue.js学习课程（3 / 6）
13. 条件渲染
知识点
- v-if
- v-else-if
- v-else
v-if
判断vue.js的变量的值，然后执行页面渲染逻辑。（if-elseif-else）
<div id="myApp">
<h1 v-if="result == 0">成绩未公布</h1>
<h1 v-else-if="result < 60">{
{result}}分 - 考试不及格</h1>
<h1 v-else-if="result < 80">{
{result}}分 - 还需努力</h1>
<h1 v-else>{
{result}}分 - 考得不错，玩游戏吧！</h1>
<button @click="btnClick">考试成绩</button>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
result: 0
},
methods: {
btnClick: function(){
this.result = Math.round(Math.random() * 100);
},
},
});
</script>
14. 元素显示v-show
知识点
- v-show
v-show
标记是否显示html元素。(注意：v-show设置的标记在html DOM中不会消失)
<div id="myApp">
<h1 v-show="result">任天堂新一代主机Switch</h1>
<button @click="btnClick">考试成绩</button>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
result: true
},
methods: {
btnClick: function(){
this.result = !this.result;
},
},
});
</script>
15. 列表渲染
知识点
- v-for
v-for
循环数组元素，整理内容显示到页面上。
<div id="myApp">
<ul>
<li v-for="(game, index) in games">({
{index}}) {
{game.title}} / 售价：{
{game.price}}元</li>
</ul>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
games: [
{
title:"勇者斗恶龙",price:500},
{
title:"库跑卡丁车",price:400},
{
title:"马里奥世界",price:550},
]
},
});
</script>
16. JS对象迭代
知识点
- v-for
v-for
循环JS对象，把对象内容循环显示到页面上。
<div id="myApp">
<h1>JS对象迭代</h1>
<div v-for="(value, key) in mygame">
{
{ key }} : {
{ value }}
</div>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
mygame: {
title: "乌贼娘2代",
price: 350,
pubdate: "2017年夏季",
category: "射击",
agerange: "全年龄",
},
},
});
</script>
17. 事件处理器
知识点
- v-on:(event)/@(event)
v-on:(event)
页面元素的事件绑定。（click,keyup,load等等）
<div id="myApp">
<h1>事件处理器</h1>
<input id="txtName" v-on:keyup="txtKeyup($event)">
<button id="btnOK" v-on:click="btnClick($event)">OK</button>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
},
methods: {
txtKeyup: function(event){
this.debugLog(event);
},
btnClick: function(event){
this.debugLog(event);
},
debugLog:function(event){
console.log(
event.srcElement.tagName,
event.srcElement.id,
event.srcElement.innerHTML,
event.key?event.key:""
);
},
},
});
</script>
18. 表单控件绑定
知识点
- v-model
- input[type=“text”]
v-model
为表单控件元素创建双向数据绑定。（将JS变量的值“快速”设定到控件上，然后将用户输入的内容“快速”设置回JS变量）
<div id="myApp">
<h1>表单控件绑定</h1>
<input type="text" v-model="message" placeholder="来呀，编辑我吧！">
<p>Message is: {
{ message }}</p>
<textarea v-model="message" placeholder="加入多行编辑" rows="8" cols="34"></textarea>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
message: "我爱马里奥",
},
methods: {
},
});
</script>