v-for循环结构

当有一段相同或相似的代码,需要重复执行n次的时候,会使用到循环结构

3.1 for循环

语法:for(var 计数变量=初始值,循环条件:递增){

循环体:}

<script>
            //输出1-1000
        for(var i=1;i<100;i++){
            //循环体

            document.write(i+'<br>')
           
        }
            //document.write(2)   
</script>

3.2.while循环

语法:

计数变量

while(循环条件){

循环体

递增递减

}

3.do.while循环

语法:

计数变量

while(循环条件){

do{

循环体

递增递减

}while(循环条件)

函数:一段有名字的代码块

作用:实现代码复用和提高开发效率

特性:函数不能自动执行,需要调用

语法: function 函数名称{[参数]}{

实现特定功能的代码块

}

函数调用函数名(实参) (变化的数据 属于参数)

注意:形参的个数和实参的个数要保持一致

<script>
    	function printInfo(name,sex,age){
            document.write('我叫'+name+',是个'+sex+'的,今年'+age+'岁了<br>')   //函数定义语句
        }
        printInfo('李四','男','21')
</script>

判断给定的年份是否是一个闰年,如果是闰年返回true,不是返回 false

返回值:return

作用:给函数本身设置一个值,终止后续代码执行

注意:一个代码只能有一个返回值

在VNE.js中,你可以使用v-on指令结合Vue.js的模板语法来处理事件,同时利用v-if和v-for来构建复杂的循环结构。以下是一个简化版的3x3扫雷游戏布局的示例代码: 首先,在HTML部分,设置好你的游戏区域以及一个按钮来触发点击事件: ```html <template> <div class="minefield"> <div v-for="(row, rowIndex) in minefield.grid" :key="rowIndex"> <div v-for="(cell, cellIndex) in row" :key="cellIndex" :class="{ flagged: cell.flagged, mine: cell.isMine }" v-on:click="handleCellClick(rowIndex, cellIndex)"> <span v-if="!cell.isMine">{{ cell.numMinesAround }}</span> <!-- 如果是地雷则显示特殊标志 --> <img v-if="cell.isMine" src="flag.png" alt="Mine" /> </div> </div> <button @click="startGame">Start Game</button> </div> </template> ``` 接下来,在JS部分,定义Vue实例,包含数据属性、方法和计算属性: ```javascript <script> import { Vue } from 'vne'; export default new Vue({ data() { return { minefield: { grid: [ /* 初始化3x3的数组,其中一半是地雷 */ /* 这里省略了具体代码,因为实际地雷位置应该随机生成 */ ], flaggedCells: {}, }, }; }, methods: { startGame() { // 游戏开始的逻辑,如随机埋雷和初始化标记等 }, handleCellClick(rowIndex, cellIndex) { const cell = this.minefield.grid[rowIndex][cellIndex]; if (!cell.isMine) { cell.flagged = !cell.flagged; // 切换旗帜标记 } else { this.gameOver(); // 地雷被踩,游戏结束 } // 更新视图 this.$forceUpdate(); }, gameOver() { // 游戏结束的逻辑,如显示游戏结果信息 }, }, }); </script> ``` 在这个例子中,我们使用了v-on绑定`click`事件到每个方块上,当点击时会触发`handleCellClick`方法。v-if用来控制是否显示数字或者地雷标志。v-for分别用于行和列的循环渲染。 注意,为了实现地雷的随机分布和更复杂的逻辑,你需要在数据初始化阶段对`grid`数组进行相应的操作。这里只是一个基础框架,实际应用中还需要考虑更多的细节,比如计数邻居地雷数、防止非法点击等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值