一个简单显示是否中奖的页面,客户看到的是一个页面,实际上是两个,只不过当其中一个页面显示时,另一个看不见。
这里运用到了随机数,当随机数大于0.5时,显示中奖信息,反之,则是没有中奖的信息
DOM
<div id="myView"> <div v-if="result>0.5">恭喜您!中奖啦!</div> <div v-else>谢谢惠顾!</div> </div>
要显示中奖信息,应使用v-if判断得到的随机数是否大于0.5
另一不中奖信息,则使用v-else
JS
<script> var myViewModel = new Vue({ el: '#myView', data: { result : Math.random() } }) </script>
也可以在控制台输出
页面将同步为
反之,如控制台输出myViewModel.result = 0.3
则显示谢谢惠顾信息。