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>
