Vue2.0 学习 第三组 条件语句

Posted 2023-04-16 Agnoi

本笔记主要参考菜鸟教程和官方文档编写。
1.v-if
在div或者之类的dom中使用v-if可以控制是否插入该dom，控制由v-if的true和false决定。
如：
<div id="app">
<div v-if="test"></div>

</div>
<script>
new Vue(
el:"#app",
data:
test:true
)
</script>

2.v-show

其实说v-show是条件控制语句我是认为很奇怪的,因为咋一看它实现的功能和你看见的控制都和v-if一模一样，但实际上只是表面上一致，v-if在本质上控制的是dom元素的添加与删除，而v-show是控制的dom元素的显示与不显示，这也意味着，v-show不管是true和false，虽然页面看起来变化了，但是本质上dom就在那，只是被添加css--display:none，隐形了。

<div id="app">
<div v-SHOW="test"></div>

</div>
<script>
new Vue(
el:"#app",
data:
test:true
)
</script>

3.v-else

本质是和c语言的if/else语言一样的功能，为v-if 是false提供其他选择，

如下

<div id="app">

 <p v-if="seen">test</p>
    <p v-else>real</p>

</div>
<script>
new Vue(
el:"#app",
data:
test:false

)
</script>

4.v-else-if

同上，只不过这个语句可以设置多个实现多项判断、

<div id="app">
    <div v-if="type === \'A\'">
      A
    </div>
    <div v-else-if="type === \'B\'">
      B
    </div>
    <div v-else-if="type === \'C\'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue(
  el: \'#app\',
  data:
    type: \'C\'
 
)
</script>

第三组冲刺会议 2017.7.29

冲刺会议

日期：2017.7.29

开发小组：Geomestry

冲刺经理：程立智

成员： 程立智 李明伦 郑昊 蔡镇泽 温志成 汪涵

 

成员：程立智

完成工作：实现全局多语言，各种界面大小自适应 ，添加系统推送

所遇问题： 界面难以跟随设置立即更新

下一步工作：实现成就系统，解决大家最后测试出的各种系统bug

 

成员：李明伦

完成工作：写中英文关卡说明 和 实现关卡初始条件

所遇问题： 个别关卡描述不明确

下一步工作：测试程序在低端笔记本上面是否有运行不良状况

 

成员：郑昊

完成工作：重构各种界面的外观，各种p图，实现UI大小自适应和自定义各种样式模板

所遇问题：暂无

下一步工作：做最后发布前的测试

 

成员：蔡镇泽

完成工作： 重构引擎各种功能

所遇问题： 过关验证有问题

下一步工作： 实现关卡的过关验证

 

成员：温志成

完成工作：无

所遇问题：无

下一步工作：无

 

成员：王涵

完成工作：无

所遇问题： 无

下一步工作：无