Bagaimana untuk menggunakan sintaks templat Vue3?-View.js-php.cn

1. Apakah sintaks templat?

Kami boleh memahami secara langsung sintaks templat Vue.js sebagai lanjutan daripada sintaks HTML Semua pengisytiharan nod templat, tetapan atribut dan pendaftaran acaranya adalah berdasarkan sintaks HTML Direka untuk pengembangan. . Menurut kenyataan rasmi, "semua Vue templat adalah sah dari segi tatabahasa HTML dan boleh dihuraikan oleh penyemak imbas dan HTML penghurai yang mematuhi spesifikasi."

Vue menggunakan sintaks templat berasaskan HTML yang membolehkan kami mengikat data kejadian komponennya secara deklaratif ke DOM yang diberikan

2

1. v-text

menggunakan arahan

t untuk mengisi elemen kosongnya dengan data dalam teks biasa v-tex

// 组合式
<script setup>

    import { reactive } from &#39;vue&#39;

    let student = reactive({
        name: &#39;Jack&#39;,
        desc: &#39;<h4>我是来自中国的小朋友！</h4>&#39;
    })
    
</script>

<template>

  <!-- 使用v-text指令，将数据采用纯文本方式填充其空元素中 -->
  
  <div v-text="student.name"></div>

  <!-- v-text：以纯文本的方式显示数据 -->
  <div v-text="student.desc"></div>

  <!-- 下面的代码会报错：div 元素不是空元素 -->
  <!-- <div v-text="student.name">这是原始的div数据</div> -->
   
</template>

Salin selepas log masuk

menjadikan data sebagai teks biasa pada kedudukan tertentu dalam elemen

// 组合式
<script setup>

import { reactive } from &#39;vue&#39;

let student = reactive({
    name: &#39;Jack&#39;,
    desc: &#39;<h4>我是来自中国的小朋友！</h4>&#39;
})

</script>

<template>

    <!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->
    <div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div>

</template>

Salin selepas log masuk

3 v-html

menggunakan arahan

untuk menukar data ke dalam sintaks

. elemen kosongnya v-html

// 组合式
<script setup>

import { reactive } from &#39;vue&#39;

let student = reactive({
    name: &#39;Jack&#39;,
    desc: &#39;<h4>我是来自中国的小朋友！</h4>&#39;
})


</script>

<template>

    <!-- 使用v-html指令，将数据采用HTML语法填充其空元素中 -->

    <div v-html="student.name"></div>

    <!-- v-html：以 HTML 语法显示数据 -->
    <div v-html="student.desc"></div>

    <!-- 下面的代码会报错：div 元素不是空元素 -->
    <!-- <div v-html="student.name">这是原始的div数据</div> -->

</template>

Salin selepas log masuk

HTML 3. Arahan pengikatan dua hala

1. Model v

Arahan pengikatan data dua hala, lihat data Segerakkan dengan sumber data

Secara amnya, arahan v-model digunakan dalam elemen bentuk: <br/>v-model

acara input<li><p></p></li><input type="checkbox"> dan <input type="radio"> akan mengikat atribut yang ditandai dan mendengar acara perubahan<li> <p></p></li><pilih> akan mengikat atribut nilai dan mendengar peristiwa perubahan<li><p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script setup>

import { ref } from &#39;vue&#39;

let inputText = ref(&#39;ABC&#39;)  // 单行文本框
let message = ref(&#39;本次更新有以下几点：……&#39;) // 多行文本框
let open = ref(true) // 开灯（复选框）
let determine = ref(&#39;不确定&#39;) // 是否确定（复选框）
let likes = ref([&#39;YMQ&#39;]) // 兴趣爱好（复选框）
let sex = ref(&#39;woman&#39;) // 性别（单选按钮）
let level = ref(&#39;B&#39;) //  // 证书等级（单选下拉框）
let city = ref([&#39;苏C&#39;, &#39;苏B&#39;]) // 去过的城市（多选下拉框）

</script>

<input type="text" v-model="inputText">

<hr>
    
    <input type="checkbox" v-model="open"> 灯

<hr>
    
    <input type="checkbox" true-value="确定" false-value="不确定" v-model="determine"> 是否确定

<hr>
    <input type="checkbox" value="LQ" v-model="likes"> 篮球
    <input type="checkbox" value="ZQ" v-model="likes"> 足球
    <input type="checkbox" value="YMQ" v-model="likes"> 羽毛球
    <input type="checkbox" value="PPQ" v-model="likes"> 乒乓球

<hr>
    <input type="radio" value="man" v-model="sex"> 男
    <input type="radio" value="woman" v-model="sex"> 女

<hr>
    去过的城市：
    <select multiple v-model="city">
        <option value="苏A">南京</option>
        <option value="苏B">无锡</option>
        <option value="苏C">徐州</option>
        <option value="苏D">常州</option>
    </select>

</template></pre><div class="contentsignin">Salin selepas log masuk</div></div></li>2<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script setup>

import { ref } from &#39;vue&#39;

let age = ref(20)
let nickname = ref(&#39;&#39;)

</script>

<template>
    
    <p>将用户输入的值转成数值 .number，懒更新 .lazy</p>
    
    
    <input type="text" v-model.lazy.number="age">

<hr>
    <p>去掉首尾空白字符</p>
    <input type="text" v-model.trim="nickname">

</template></pre><div class="contentsignin">Salin selepas log masuk</div></div><h3>四、属性绑定指令</h3><ul class=" list-paddingleft-2"><li><p>响应式地绑定一个元素属性，应该使用 <code>v-bind:</code> 指令</p></li><li><p>如果绑定的值是 <code>null</code> 或者 <code>undefined</code>，那么该属性将会从渲染的元素上移除</p></li><li><p>因为 <code>v-bind</code> 非常常用，我们提供了特定的简写语法:</p></li></ul><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script setup>

import { reactive } from &#39;vue&#39;

let picture = reactive({
    src: &#39;https://cache.yisu.com/upload/information/20230306/112/35391.jpg&#39;, // 图像地址
    width: 200 // 显示宽度
})

</script>

<hr>

<button @click="picture.width = null">设置宽度为NULL</button>

</template></pre><div class="contentsignin">Salin selepas log masuk</div></div><h4>1. 动态绑定多个属性值</h4><p>直接使用 <code>v-bind</code> 来为元素绑定多个属性及其值</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script setup>

import {reactive} from &#39;vue&#39;

let attrs = reactive({
    class: &#39;error&#39;,
    id: &#39;borderBlue&#39;
})

</script>

<template>
    
    
    <button v-bind="attrs">我是一个普通的按钮</button>

</template>

#borderBlue {
        border: 2px solid rgb(44, 67, 167);
    }
</style></pre><div class="contentsignin">Salin selepas log masuk</div></div><blockquote><p>渲染结果：<br/><code><button class="redBack" id="btnBorderBlue">我是一个普通按钮</button></code></p></blockquote><h4>2. 绑定class和style属性</h4><p><code>class</code> 和 <code>style</code> 可以和其他属性一样使用 <code>v-bind</code> 将它们和动态的字符串绑定；但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的；因此， <code>Vue</code> 专门为 <code>class</code> 和 <code>style</code> 的 <code>v-bind</code> 用法提供了特殊的功能增强；除了字符串外，表达式的值也可以是对象或数组。</p><p>class属性绑定</p><p><strong>绑定对象</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script setup>

import { ref, reactive } from &#39;vue&#39;

let btnClassObject = reactive({
    error: false, // 主题色
    flat: false // 阴影
})

let capsule = ref(false)// 胶囊
let block = ref(false)// 块

</script>

<input type="checkbox" v-model="btnClassObject.error"> error
    <input type="checkbox" v-model="btnClassObject.flat"> flat
    <br>
    <br>
    <button :class="btnClassObject">我是一个普通的按钮</button>

<hr>
    <input type="checkbox" v-model="capsule"> 胶囊
    <input type="checkbox" v-model="block"> 块
    <br>
    <br>
    <button :class="{ &#39;rounded&#39;: capsule, &#39;fullWidth&#39;:  block }">我是一个普通的按钮</button>

</template>

.error {
    background-color: rgb(167, 58, 58);
    color: white;
}

.flat {
    box-shadow: 0 0 8px gray;
}

.rounded {
    border-radius: 100px;
}

.fullWidth {
    width: 100%;
}
</style></pre><div class="contentsignin">Salin selepas log masuk</div></div><p><strong>绑定数组</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script setup>

import { ref, reactive } from &#39;vue&#39;

let btnTheme = ref([]) // 按钮class数组

let capsule = ref(false)// 胶囊
let widthTheme = ref([])// 宽度数组

</script>

<input type="checkbox" value="error" v-model="btnTheme"> error
    <input type="checkbox" value="flat" v-model="btnTheme"> flat
    <br>
    <br>
    
    <button :class="btnTheme">我是一个普通的按钮</button>

<hr>
    <input type="checkbox" v-model="capsule"> 胶囊
    <input type="checkbox" value="fullWidth" v-model="widthTheme"> 块
    <br>
    <br>
    
    <button :class="[{ &#39;rounded&#39;: capsule }, widthTheme]">我是一个普通的按钮</button>

</template>

.error {
    background-color: rgb(167, 58, 58);
    color: white;
}

.flat {
    box-shadow: 0 0 8px gray;
}

.rounded {
    border-radius: 100px;
}

.fullWidth {
    width: 100%;
}
</style></pre><div class="contentsignin">Salin selepas log masuk</div></div><p>style属性绑定</p><p><strong>绑定对象</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script setup>

import { reactive, ref } from &#39;vue&#39;

let btnTheme = reactive({
    backgroundColor: &#39;#FF0000&#39;, // 背景色
    color: &#39;#000000&#39; // 文本色
})

let backColor = ref(&#39;#0000FF&#39;)  // 背景色
let color = ref(&#39;#FFFFFF&#39;)  // 文本色
let borRadius = ref(20) // 边框圆角

</script>

背景色：<input type="color" v-model="btnTheme.backgroundColor">
    文本色：<input type="color" v-model="btnTheme.color">
    <br>
    <br>
    
    <button :>我是一个普通的按钮</button>

<hr>

背景色：<input type="color" v-model="backColor">
    文本色：<input type="color" v-model="color">
    边框圆角：<input type="range" min="0" max="20" v-model="borRadius">
    <br>
    <br>
    
    <button :style="{
        backgroundColor: backColor,
        color,
        &#39;border-radius&#39;: borRadius + &#39;px&#39;
    }">我是一个普通的按钮</button>

</template>

const btnTheme = ref([
    {
        backgroundColor: &#39;#FF0000&#39;, // 背景色
        color: &#39;#FFFFFF&#39; // 文本色
    },
    {
        borderRadius: 0 // 边框圆角
    }
])

const colorTheme = reactive({
    backgroundColor: &#39;#000000&#39;, // 背景色
    color: &#39;#FFFFFF&#39; // 文本色
})

const radiusTheme = reactive({
    borderRadius: 0 // 边框圆角
})
</script>

<template>

背景色：<input type="color" v-model="btnTheme[0].backgroundColor">
    文本色：<input type="color" v-model="btnTheme[0].color">
    胶囊：<input type="checkbox" true-value="5px" false-value="0" v-model="btnTheme[1].borderRadius">
    <br>
    <br>
    
    <button :>我是一个普通按钮</button>

<hr>

背景色：<input type="color" v-model="colorTheme.backgroundColor">
    文本色：<input type="color" v-model="colorTheme.color">
    胶囊：<input type="checkbox" true-value="5px" false-value="0" v-model="radiusTheme.borderRadius">
    <br>
    <br>
    
    <button :>我是一个普通按钮</button>
</template>

import { ref } from &#39;vue&#39;

let isShow = ref(false)  // 是否显示
let age = ref(20)  // 年龄
let week = ref(3)  // 周几

</script>

是否显示：<input type="checkbox" v-model="isShow">
    
    <h4 v-if="isShow">这是一个普通的标题标签</h4>

<hr>

年龄: <input type="range" min="0" max="100" v-model="age"> {{ age }}
    
    <h2 v-if="age < 18">未成年</h2>
    
    <h3 v-else-if="age < 35">青年</h3>
    <h4 v-else-if="age < 50">中年</h4>
    <h5 v-else>老年</h5>

<hr>

周几: <input type="range" min="1" max="7" v-model="week"> {{ week }}

<template v-if="week == 1 || week == 3 || week == 5 || week == 7">
        <h2>可以游泳</h2>
    </template>
    <template v-else>
        <h2>不可以游泳</h2>
    </template>

</template></pre><div class="contentsignin">Salin selepas log masuk</div></div><h4>2. v-show</h4><ul class=" list-paddingleft-2"><li><p><code>v-show</code> 按条件显示一个元素的指令<code>v-show</code> 会在 <code>DOM</code> 渲染中保留该元素</p></li><li><p><code>v-show</code> 仅切换了该元素上名为 <code>display</code> 的 <code>CSS</code> 属性</p></li><li><p><code>v-show</code> 不支持在 <code><template></code> 元素上使用，也不能和 <code>v-else</code> 搭配使用</p></li></ul><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><br/></pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script setup>

import { ref } from &#39;vue&#39;

let isShow = ref(false)  // 是否显示
let age = ref(20)  // 年龄
let week = ref(3)  // 周几

</script>

是否显示：<input type="checkbox" v-model="isShow">
    
    <h4 v-show="isShow">这是一个普通的标题标签</h4>

<hr>

年龄: <input type="range" min="0" max="100" v-model="age"> {{ age }}

<hr>

周几: <input type="range" min="1" max="7" v-model="week"> {{ week }}

</template></pre><div class="contentsignin">Salin selepas log masuk</div></div><h4>3. v-if和v-show的区别</h4><ul class=" list-paddingleft-2"><li><p><code>v-if</code> 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建</p></li><li><p><code>v-if</code> 也是惰性的：如果在初次渲染时条件值为 <code>false</code>，则不会做任何事；条件区块只有当条件首次变为 <code>true</code> 时才被渲染</p></li><li><p><code>v-show</code> 元素无论初始条件如何，始终会被渲染，只有 CSS <code>display</code> 属性会被切换</p></li><li><p><code>v-if</code> 有更高的切换开销，而 <code>v-show</code> 有更高的初始渲染开销；如果需要频繁切换，则使用 <code>v-show</code> 较好；如果在运行时绑定条件很少改变，则 <code>v-if</code> 会更合适</p></li></ul><h3>六、事件绑定指令</h3><p>我们可以使用 <code>v-on:</code> 指令 (简写为@) 来监听 <code>DOM</code> 事件，并在事件触发时执行对应的 <code>JavaScript</code><br/>用法：<code>v-on:click=""</code> 或 <code>@click=""</code></p><p><strong>用法：</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script>
export default {
    data: () => ({
        volume: 5  // 音量[0, 10]
    }),
    methods: {
        // 添大音量
        addVolume() {
            // 如果音量没有在最高值，则添加音量
            if (this.volume !== 10) {
                this.volume++
            }
        },
        // 减小音量
        subVolume() {
            // 如果音量没有在最小值，则减小音量
            if (this.volume !== 0) {
                this.volume--
            }
        },
        // 设置音量
        setVolume(value) {
            // 判断音量是否在取值范围之间
            if (value >= 0 && value <= 10) {
                this.volume = value
            }

}
    }
}
</script>
<template>

<h4>当前音量：{{ volume }}</h4>

<button v-on:click="addVolume">添加音量</button>
    <button v-on:click="subVolume">减小音量</button>

<hr>

<button @click="setVolume(0)">静音</button>
    <button @click="setVolume(5)">音量适中</button>
    <button @click="setVolume(10)">音量最大</button>

</template></pre><div class="contentsignin">Salin selepas log masuk</div></div><h4>1. 事件修饰符</h4><table><tbody><tr class="firstRow"><th>事件修饰符</th><th>说明</th></tr><tr><td><code>.prevent</code></td><td>阻止默认行为</td></tr><tr><td><code>.stop</code></td><td>阻止事件冒泡</td></tr><tr><td><code>.capture</code></td><td>以捕获模式触发当前的事件处理函数</td></tr><tr><td><code>.once</code></td><td>绑定的事件只触发1次</td></tr><tr><td><code>.self</code></td><td>只有在event.target是当前元素自身时触发事件处理函数</td></tr><tr><td><code>.passive</code></td><td>向浏览器表明了不想阻止事件的默认行为</td></tr></tbody></table><h4>.prevent</h4><p><code>.prevent</code> ：阻止该事件的默认行为</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script setup>

// 打招呼
function say(name) {
    window.alert(&#39;你好：&#39; + name)
}

</script>

<a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  @click.prevent="say(&#39;baiDu&#39;)">百度</a>

</template></pre><div class="contentsignin">Salin selepas log masuk</div></div><h4>.stop</h4><p><code>.stop</code> ：阻止事件产生的冒泡现象</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script setup>
// 打招呼
function say(name) {
    console.log(&#39;你好：&#39; + name)
}
</script>

<template>
    
    <button @click.once="say(&#39;BUTTON&#39;)">点我试一下</button>
</template></pre><div class="contentsignin">Salin selepas log masuk</div></div><h4>.self</h4><p><code>.self</code> ：只有在 <code>event.target</code> 是当前元素自身时触发事件处理函数</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script setup>
// 打招呼
function say(name) {
    window.alert(&#39;你好：&#39; + name)
}
</script>

<template>
    
    <div class="divArea" @click.self="say(&#39;DIV&#39;)">
        <button>我是一普通的按钮</button>
    </div>
</template>

<template>
    
    <div class="divArea" @click.capture="say(&#39;DIV-1&#39;)">
        <div class="divArea" @click="say(&#39;DIV-2&#39;)">
            <div class="divArea" @click.capture="say(&#39;DIV-3&#39;)">
                <button>我是一普通的按钮</button>
            </div>
        </div>
    </div>
</template>

<template>
    
    <a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  @click.passive="eventPrevent">百度</a>
</template></pre><div class="contentsignin">Salin selepas log masuk</div></div><h4>2. 按键修饰符</h4><p>按键别名：<code>.enter</code>、<code>.tab</code>、<code>.esc</code>、<code>.space</code>、<code>.up</code>、<code>.down</code>、<code>.left</code>、<code>.right</code>、<code>.delete</code> (捕获 <code>Delete</code> 和 <code>Backspace</code> 两个按键)<br/>系统修饰符：<code>.ctrl</code>、<code>.alt</code>、<code>.shift</code>、<code>.meta</code><br/>准确的修饰符：<code>.exact</code></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script setup>
// 弹出消息
function showMessage(message) {
    window.alert(message)
}
</script>

<template>
    按下的键中包含 Enter 键事件： <input type="text" @keydown.enter="showMessage(&#39;你按下了 Enter 键&#39;)">
    <hr>
    按下的键中包含 Shift Enter 键事件：<input type="text" @keydown.enter.shift="showMessage(&#39;你按下了 Shift + Enter 键&#39;)"/>
    <hr>
    按下的键只有 Shift Enter 键事件：<input type="text" @keydown.enter.shift.exact="showMessage(&#39;你只按下了 Shift + Enter 键&#39;)"/>
</template></pre><div class="contentsignin">Salin selepas log masuk</div></div><h4>3. 鼠标按键修饰符</h4><p>鼠标按键修饰符：<code>.left</code>、<code>.right</code>、<code>.middle</code></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式

<script setup>
    function showTest(text) {
        window.alert(text)
    }
</script>

<template>
    
    <button @mousedown.right="showTest(&#39;按下的是鼠标右键&#39;)">鼠标右键按下</button>

<hr>
    
    <button @click.middle="showTest(&#39;按下的是鼠标中键&#39;)">点击时，采用的是鼠标中键</button>

<hr>
    
    <button @mousedown.left="showTest(&#39;按下的是鼠标左键&#39;)">鼠标左键按下</button>
</template>

<style>
    button {
        border: none;
        padding: 15px 20px;
    }

button:active {
        box-shadow: 0 0 5px grey;
    }
</style></pre><div class="contentsignin">Salin selepas log masuk</div></div><h3>七、列表渲染指令</h3><p>使用 <code>v-for</code> 指令基于一个数组来渲染一个列表</p><h4>1. v-for渲染数组</h4><p>语法：</p><p><code>in</code> 前一个参数：<code>item in items</code><br/><code>item</code> ：值<br/><code>items</code> ：需要循环的数组<code>in</code> 前两个参数：<code>(value, index) in items</code><br/><code>value</code> ：值<br/><code>index</code> ：索引<br/><code>items</code> ：需要循环的数组</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script setup>
import { ref } from &#39;vue&#39;
// 课程
let subject = ref([
    { id: 1, name: &#39;Vue&#39; },
    { id: 2, name: &#39;Java&#39; },
    { id: 3, name: &#39;UI设计&#39; },
    { id: 4, name: &#39;Hadoop&#39; },
    { id: 5, name: &#39;影视后期&#39; },
])
</script>

<template>
    
    <h7>v-for 渲染数组， v-for="item in itmes"</h7>
    <ul>
        <li v-for="sub in subject">
            编号：{{ sub.id }} --- 名称：{{ sub.name }}
        </li>
    </ul>

<hr>

<h7>v-for 渲染数组， v-for="{ 解构…… } in itmes"</h7>
    <ul>
        <li v-for="{ id , name } in subject">
            编号：{{ id }} --- 名称：{{ name }}
        </li>
    </ul>

<hr>
    
    <h7>v-for 渲染数组， v-for="(value, index) in itmes"</h7>
    <ul>
        <li v-for="(sub, index) in subject">
            编号：{{ sub.id }} --- 名称：{{ sub.name }} --- 索引：{{ index }}
        </li>
    </ul>

<hr>

<h7>v-for 渲染数组， v-for="({ 解构…… }, index) in itmes"</h7>
    <ul>
        <li v-for="({ id , name } , index) in subject">
            编号：{{ id }} --- 名称：{{ name }} --- 索引：{{ index }}
        </li>
    </ul>
</template></pre><div class="contentsignin">Salin selepas log masuk</div></div><h4>2. v-for渲染对象</h4><p>使用 <code>v-for</code> 来遍历一个对象的所有属性，遍历的顺序会基于对该对象调用 <code>Object.keys()</code> 的返回值来决定<br/>语法：</p><p><code>in</code> 前一个参数：<code>value in object</code><br/><code>value</code> ：属性值<br/><code>items</code> ：需要循环的对象<code>in</code> 前两个参数：<code>(value, name) in object</code><br/><code>value</code> ：属性值<br/><code>name</code> ：键<br/><code>items</code> ：需要循环的对象<code>in</code> 前三个参数：<code>(value, name, index) in object</code><br/><code>value</code> ：属性值<br/><code>name</code> ：键<br/><code>index</code> ：索引<br/><code>items</code> ：需要循环的对象</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script setup>
import { reactive } from &#39;vue&#39;
let student = reactive({
    styNum: &#39;007&#39;, // 学号
    name: &#39;Jack&#39;, // 名字
    age: 18 //年龄
})
</script>

<template>
    
    <h7>v-for 渲染对象， v-for="value in object"</h7>
    <ul>
        <li v-for="value in student">
            {{ value }}
        </li>
    </ul>

<hr>

<h7>v-for 渲染对象， v-for="(value, name) in object"</h7>
    <ul>
        <li v-for="(value, name) in student">
            属性名：{{ name }} --- 属性值： {{ value }}
        </li>
    </ul>

<hr>

<h7>v-for 渲染对象， v-for="(value, name, index) in object"</h7>
    <ul>
        <li v-for="(value, name, index) in student">
            属性名：{{ name }} --- 属性值： {{ value }} --- 索引：{{ index }}
        </li>
    </ul>
</template></pre><div class="contentsignin">Salin selepas log masuk</div></div><h4>3. 通过 key 管理状态</h4><p>当列表的数据变化时，默认情况下，<code>vue</code> 会尽可能的复用已存在的 <code>DOM</code> 元素，从而提升渲染的性能；但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。<br/>为了给 <code>vue</code> 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能；此时，需要为每项提供一个唯一的key属性：<br/><code>key</code> 的注意事项：</p><ul class=" list-paddingleft-2"><li><p><code>key</code> 的类型只能是 <code>Number/String</code></p></li><li><p><code>key</code> 值必须具有唯一性</p></li><li><p>建议循环的列表有一个属性当 <code>key</code>（该属性的值在此列表中唯一）</p></li><li><p>不使用索引当 <code>key</code></p></li><li><p>建议使用 <code>v-for</code> 指令时一定要指定 <code>key</code> 的值</p></li></ul><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 组合式
<script setup>
import { ref } from &#39;vue&#39;
// 课程
let subject = ref([
    { id: 1, name: &#39;Vue&#39; },
    { id: 2, name: &#39;Java&#39; },
    { id: 3, name: &#39;Hadoop&#39; }
])

// 添加课程
function addSubject() {
    // （数组最前面）添加
    subject.value.unshift({ id: 4, name: &#39;Python&#39; })
}
</script>

<button @click.once="addSubject">添加课程（数组最前面）</button>

<h4>不使用key值</h4>
    <ul>
        <li v-for="sub in subject">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

<hr>

<h4>使用索引当key值</h4>
    
    <ul>
        <li v-for="(sub, index) in subject" :key="index">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

<hr>

<h4>使用列表属性当key值（该属性必须再此列表中唯一）</h4>
    
    <ul>
        <li v-for="sub in subject" :key="sub.id">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

</template></pre><div class="contentsignin">Salin selepas log masuk</div></div></p><p>Atas ialah kandungan terperinci Bagaimana untuk menggunakan sintaks templat Vue3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p>                </div>
            </div>
            <div style="height: 25px;">
                                <div class="wzconBq" style="display: inline-flex;">
                    <span>Label berkaitan：</span>
                    <div class="wzcbqd">
                        <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/ms/search?word=vue3" target="_blank">vue3</a>                    </div>
                </div>
                                <div style="display: inline-flex;float: right; color:#333333;">sumber：yisu.com</div>
                            </div>
            <div class="wzconOtherwz">
                                    <a href="http://www.php.cn/ms/faq/534660.html" title="Bagaimana untuk mengakses data dalam objek proksi reaktif Vue3?">
                        <span>Artikel sebelumnya：Bagaimana untuk mengakses data dalam objek proksi reaktif Vue3?</span>
                    </a>
                                    <a href="http://www.php.cn/ms/faq/534781.html"  title="Bagaimana untuk menyelesaikan masalah menggunakan kesan khas zarah dalam vue3">
                        <span>Artikel seterusnya：Bagaimana untuk menyelesaikan masalah menggunakan kesan khas zarah dalam vue3</span>
                    </a>
                            </div>
            <div class="wzconShengming">
       
                <div class="bzsmdiv">Kenyataan Laman Web ini</div>
                <div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div>
            </div>
           <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div>
            <div class="wzconZzwz">
                <div class="wzconZzwztitle">Artikel terbaru oleh pengarang</div>
                <ul>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/1796639331.html">Apakah itu NullPointerException, dan bagaimana saya membetulkannya?</a>
                            </div>
                            <div>2024-10-22 09:46:29</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/1796629482.html">Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C</a>
                            </div>
                            <div>2024-10-13 13:53:41</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/1796628545.html">Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula</a>
                            </div>
                            <div>2024-10-12 12:15:51</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/1796627928.html">Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu</a>
                            </div>
                            <div>2024-10-11 22:47:31</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/1796627806.html">Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak</a>
                            </div>
                            <div>2024-10-11 19:36:51</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/1796627670.html">Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak</a>
                            </div>
                            <div>2024-10-11 15:50:41</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/1796627643.html">Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula</a>
                            </div>
                            <div>2024-10-11 15:07:41</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/1796627620.html">PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web</a>
                            </div>
                            <div>2024-10-11 14:21:21</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/1796627574.html">Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda</a>
                            </div>
                            <div>2024-10-11 12:59:11</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/1796627539.html">Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula</a>
                            </div>
                            <div>2024-10-11 12:17:31</div>
                        </li>
                                    </ul>
            </div>
            <div class="wzconZzwz">
                <div class="wzconZzwztitle">Isu terkini</div>
                <div class="wdsyContent">
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/ms/wenda/176322.html"  target="_blank" title="Menyelesaikan isu binaan pengeluaran komponen web Vue3" class="wdcdcTitle">Menyelesaikan isu binaan pengeluaran komponen web Vue3</a>
                            <a href="http://www.php.cn/ms/wenda/176322.html" class="wdcdcCons">Saya cuba memindahkan komponen vue2web saya ke vue3, walaupun masalah timbul apabila saya ...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> daripada 2024-04-06 12:43:37</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>473</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/ms/wenda/176303.html"  target="_blank" title="Vite/Vue 3: "Keperluan tidak ditentukan" apabila menggunakan sumber imej sebagai prop" class="wdcdcTitle">Vite/Vue 3: "Keperluan tidak ditentukan" apabila menggunakan sumber imej sebagai prop</a>
                            <a href="http://www.php.cn/ms/wenda/176303.html" class="wdcdcCons">Saya bertukar daripada VueCLI kepada ViteCLI, dan daripada CompositionAPI Vue3 kepada SFCS...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> daripada 2024-04-06 09:50:25</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>353</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/ms/wenda/175715.html"  target="_blank" title="Hadkan ketinggian segmen akordion yang runtuh Bootstrap 5 Vue3" class="wdcdcTitle">Hadkan ketinggian segmen akordion yang runtuh Bootstrap 5 Vue3</a>
                            <a href="http://www.php.cn/ms/wenda/175715.html" class="wdcdcCons">Saya sedang membina aplikasi web menggunakan Vue3 dan bootstrap5. Tetapi saya fikir soalan...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> daripada 2024-03-31 21:56:54</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>332</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/ms/wenda/175690.html"  target="_blank" title="Vue3.js) Ralat: Modul 'firebase' tidak ditemui" class="wdcdcTitle">Vue3.js) Ralat: Modul 'firebase' tidak ditemui</a>
                            <a href="http://www.php.cn/ms/wenda/175690.html" class="wdcdcCons">Kali pertama saya menggunakan firebase dengan vue.js. Selepas memasang firebase menggunaka...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> daripada 2024-03-31 19:01:32</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>304</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/ms/wenda/175591.html"  target="_blank" title="Ketahui cara mendapatkan nilai harta CSS.registerProperty()" class="wdcdcTitle">Ketahui cara mendapatkan nilai harta CSS.registerProperty()</a>
                            <a href="http://www.php.cn/ms/wenda/175591.html" class="wdcdcCons">Saya mendaftarkan harta melalui kaedah CSS.registerProperty. Masalahnya ialah apabila saya...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> daripada 2024-03-30 22:12:33</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>275</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                    </div>
            </div>
            <div class="wzconZt" >
                <div class="wzczt-title">
                    <div>Topik-topik yang berkaitan</div>
                    <a href="http://www.php.cn/ms/faq/zt" target="_blank">Lagi>
                    </a>
                </div>
                <div class="wzcttlist">
                    <ul>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/vueqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072214321663953.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Perbezaan antara vue2.0 dan 3.0" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/vueqb" class="title-a-spanl" title="Perbezaan antara vue2.0 dan 3.0"><span>Perbezaan antara vue2.0 dan 3.0</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/vuedsmzqynx"><img src="https://img.php.cn/upload/subject/202407/22/2024072213264625329.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Apakah kitaran hayat vue3" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/vuedsmzqynx" class="title-a-spanl" title="Apakah kitaran hayat vue3"><span>Apakah kitaran hayat vue3</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/damwbjc"><img src="https://img.php.cn/upload/subject/202407/22/2024072212323599166.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Tutorial membuat syiling bertulis" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/damwbjc" class="title-a-spanl" title="Tutorial membuat syiling bertulis"><span>Tutorial membuat syiling bertulis</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/sjhdszsm"><img src="https://img.php.cn/upload/subject/202407/22/2024072214172058513.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Apakah maksud telefon bimbit hd?" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/sjhdszsm" class="title-a-spanl" title="Apakah maksud telefon bimbit hd?"><span>Apakah maksud telefon bimbit hd?</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/wxfwhhgzhqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072214222983140.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Perbezaan antara akaun perkhidmatan WeChat dan akaun rasmi" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/wxfwhhgzhqb" class="title-a-spanl" title="Perbezaan antara akaun perkhidmatan WeChat dan akaun rasmi"><span>Perbezaan antara akaun perkhidmatan WeChat dan akaun rasmi</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/htmlzmyycss"><img src="https://img.php.cn/upload/subject/202407/22/2024072213521775403.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Bagaimana untuk merujuk css dalam html" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/htmlzmyycss" class="title-a-spanl" title="Bagaimana untuk merujuk css dalam html"><span>Bagaimana untuk merujuk css dalam html</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/ccydszbmff"><img src="https://img.php.cn/upload/subject/202407/22/2024072213473743927.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Tiga kaedah pengekodan yang biasa digunakan" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/ccydszbmff" class="title-a-spanl" title="Tiga kaedah pengekodan yang biasa digunakan"><span>Tiga kaedah pengekodan yang biasa digunakan</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/dncpuzpygyhm"><img src="https://img.php.cn/upload/subject/202407/22/2024072212340423004.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Adakah lebih tinggi frekuensi CPU komputer, lebih baik?" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/dncpuzpygyhm" class="title-a-spanl" title="Adakah lebih tinggi frekuensi CPU komputer, lebih baik?"><span>Adakah lebih tinggi frekuensi CPU komputer, lebih baik?</span> </a>
                        </li>
                                            </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="phpwzright">
        <div class="wzrOne">
            <div class="wzroTitle">Cadangan popular</div>
            <div class="wzroList">
                <ul>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="Bagaimanakah subkomponen vue memanggil kaedah komponen induk?" href="http://www.php.cn/ms/faq/483395.html">Bagaimanakah subkomponen vue memanggil kaedah komponen induk?</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="Bagaimana untuk memanggil kaedah komponen anak dalam komponen induk vue" href="http://www.php.cn/ms/faq/483398.html">Bagaimana untuk memanggil kaedah komponen anak dalam komponen induk vue</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="vue3.0和vue2.0的区别是什么？" href="http://www.php.cn/ms/faq/464077.html">vue3.0和vue2.0的区别是什么？</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title=".vue 是什么" href="http://www.php.cn/ms/faq/465747.html">.vue 是什么</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="Cara menghantar nilai daripada subkomponen vue kepada komponen induk" href="http://www.php.cn/ms/faq/480569.html">Cara menghantar nilai daripada subkomponen vue kepada komponen induk</a>
                                </div>
                            </li>
                                    </ul>
            </div>
        </div>
        <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
        <div class="wzrThree">
            <div class="wzrthree-title">
                <div>Tutorial Popular</div>
                <a target="_blank" href="http://www.php.cn/ms/course.html">Lagi>
                </a>
            </div>
            <div class="wzrthreelist swiper2">
                <div class="wzrthreeTab  swiper-wrapper">
                    <div class="check tabdiv swiper-slide" data-id="one">Tutorial berkaitan <div></div></div>
                    <div class="tabdiv swiper-slide" data-id="two">Cadangan popular<div></div></div>
                    <div class="tabdiv swiper-slide" data-id="three">Kursus terkini<div></div></div>
                </div>
                <ul class="one">
                                                <li>
                                <a target="_blank" href="http://www.php.cn/ms/course/812.html" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" href="http://www.php.cn/ms/course/812.html">Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)</a>
                                    <div class="wzrthreerb">
                                        <div>1418574 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="812">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/ms/course/74.html" title="Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu" href="http://www.php.cn/ms/course/74.html">Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu</a>
                                    <div class="wzrthreerb">
                                        <div>4260163 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="74">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/ms/course/286.html" title="Tutorial Video Permulaan JAVA" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutorial Video Permulaan JAVA"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutorial Video Permulaan JAVA" href="http://www.php.cn/ms/course/286.html">Tutorial Video Permulaan JAVA</a>
                                    <div class="wzrthreerb">
                                        <div>2495351 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="286">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/ms/course/504.html" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" href="http://www.php.cn/ms/course/504.html">Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python</a>
                                    <div class="wzrthreerb">
                                        <div>504721 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="504">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/ms/course/2.html" title="Tutorial pengenalan berasaskan sifar PHP" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="Tutorial pengenalan berasaskan sifar PHP"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutorial pengenalan berasaskan sifar PHP" href="http://www.php.cn/ms/course/2.html">Tutorial pengenalan berasaskan sifar PHP</a>
                                    <div class="wzrthreerb">
                                        <div>859644 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="2">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                    </ul>
                <ul class="two" style="display: none;">
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/812.html" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" href="http://www.php.cn/ms/course/812.html">Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)</a>
                                <div class="wzrthreerb">
                                    <div >1418574 kali belajar</div>
                                                                                <div class="courseICollection" data-id="812">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/286.html" title="Tutorial Video Permulaan JAVA" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutorial Video Permulaan JAVA"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Tutorial Video Permulaan JAVA" href="http://www.php.cn/ms/course/286.html">Tutorial Video Permulaan JAVA</a>
                                <div class="wzrthreerb">
                                    <div >2495351 kali belajar</div>
                                                                                <div class="courseICollection" data-id="286">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/504.html" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" href="http://www.php.cn/ms/course/504.html">Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python</a>
                                <div class="wzrthreerb">
                                    <div >504721 kali belajar</div>
                                                                                <div class="courseICollection" data-id="504">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/901.html" title="Pengenalan pantas kepada pembangunan bahagian hadapan web" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Pengenalan pantas kepada pembangunan bahagian hadapan web"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Pengenalan pantas kepada pembangunan bahagian hadapan web" href="http://www.php.cn/ms/course/901.html">Pengenalan pantas kepada pembangunan bahagian hadapan web</a>
                                <div class="wzrthreerb">
                                    <div >215461 kali belajar</div>
                                                                                <div class="courseICollection" data-id="901">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/234.html" title="Kuasai tutorial video PS dari awal" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Kuasai tutorial video PS dari awal"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Kuasai tutorial video PS dari awal" href="http://www.php.cn/ms/course/234.html">Kuasai tutorial video PS dari awal</a>
                                <div class="wzrthreerb">
                                    <div >881853 kali belajar</div>
                                                                                <div class="courseICollection" data-id="234">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                    </ul>
                <ul class="three" style="display: none;">
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/1648.html" title="[Web front-end] Permulaan pantas Node.js" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Permulaan pantas Node.js"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="[Web front-end] Permulaan pantas Node.js" href="http://www.php.cn/ms/course/1648.html">[Web front-end] Permulaan pantas Node.js</a>
                                <div class="wzrthreerb">
                                    <div >6730 kali belajar</div>
                                                                                <div class="courseICollection" data-id="1648">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/1647.html" title="Koleksi lengkap kursus timbunan penuh pembangunan web asing" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Koleksi lengkap kursus timbunan penuh pembangunan web asing"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Koleksi lengkap kursus timbunan penuh pembangunan web asing" href="http://www.php.cn/ms/course/1647.html">Koleksi lengkap kursus timbunan penuh pembangunan web asing</a>
                                <div class="wzrthreerb">
                                    <div >5245 kali belajar</div>
                                                                                <div class="courseICollection" data-id="1647">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/1646.html" title="Gunakan GraphQL praktikal bahasa" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Gunakan GraphQL praktikal bahasa"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Gunakan GraphQL praktikal bahasa" href="http://www.php.cn/ms/course/1646.html">Gunakan GraphQL praktikal bahasa</a>
                                <div class="wzrthreerb">
                                    <div >4385 kali belajar</div>
                                                                                <div class="courseICollection" data-id="1646">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/1645.html" title="Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah" href="http://www.php.cn/ms/course/1645.html">Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah</a>
                                <div class="wzrthreerb">
                                    <div >646 kali belajar</div>
                                                                                <div class="courseICollection" data-id="1645">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/1644.html" title="Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam" href="http://www.php.cn/ms/course/1644.html">Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam</a>
                                <div class="wzrthreerb">
                                    <div >22332 kali belajar</div>
                                                                                <div class="courseICollection" data-id="1644">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                    </ul>
            </div>
            <script>
                var mySwiper = new Swiper('.swiper2', {
                            autoplay: false,//可选选项，自动滑动
                            slidesPerView : 'auto',
                        })
                $('.wzrthreeTab>div').click(function(e){
                    $('.wzrthreeTab>div').removeClass('check')
                    $(this).addClass('check')
                    $('.wzrthreelist>ul').css('display','none')
                    $('.'+e.currentTarget.dataset.id).show()
                })
            </script>
        </div>

<div class="wzrFour">
            <div class="wzrfour-title">
                <div>Muat turun terkini</div>
                <a href="http://www.php.cn/ms/xiazai">Lagi>
                </a>
            </div>
                        <script>
                $(document).ready(function(){
                    var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{
                        speed:1000,
                        autoplay:{
                            delay:3500,
                            disableOnInteraction: false,
                        },
                        pagination:{
                            el:'.sjyx_banSwiperwz .swiper-pagination',
                            clickable :false,
                        },
                        loop:true
                    })
                })
            </script>
            <div class="wzrfourList swiper3">
                <div class="wzrfourlTab swiper-wrapper">
                    <div class="check swiper-slide" data-id="onef">kesan web <div></div></div>
                    <div class="swiper-slide" data-id="twof">Kod sumber laman web<div></div></div>
                    <div class="swiper-slide" data-id="threef">Bahan laman web<div></div></div>
                    <div class="swiper-slide" data-id="fourf">Templat hujung hadapan<div></div></div>
                </div>
                <ul class="onef">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="kod hubungan borang mesej perusahaan jQuery" href="http://www.php.cn/ms/toolset/js-special-effects/8071">[butang borang] kod hubungan borang mesej perusahaan jQuery</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="Kesan main balik kotak muzik MP3 HTML5" href="http://www.php.cn/ms/toolset/js-special-effects/8070">[Kesan khas pemain] Kesan main balik kotak muzik MP3 HTML5</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="HTML5 kesan khas menu navigasi animasi zarah sejuk" href="http://www.php.cn/ms/toolset/js-special-effects/8069">[Navigasi menu] HTML5 kesan khas menu navigasi animasi zarah sejuk</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery bentuk visual seret dan lepas kod penyuntingan" href="http://www.php.cn/ms/toolset/js-special-effects/8068">[butang borang] jQuery bentuk visual seret dan lepas kod penyuntingan</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="Kod pemain muzik Kugou tiruan VUE.JS" href="http://www.php.cn/ms/toolset/js-special-effects/8067">[Kesan khas pemain] Kod pemain muzik Kugou tiruan VUE.JS</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="Permainan kotak menolak html5 klasik" href="http://www.php.cn/ms/toolset/js-special-effects/8066">[kesan khas html5] Permainan kotak menolak html5 klasik</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="menatal jQuery untuk menambah atau mengurangkan kesan imej" href="http://www.php.cn/ms/toolset/js-special-effects/8065">[Gambar kesan khas] menatal jQuery untuk menambah atau mengurangkan kesan imej</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="Kesan zum hover kulit album peribadi CSS3" href="http://www.php.cn/ms/toolset/js-special-effects/8064">[Kesan album foto] Kesan zum hover kulit album peribadi CSS3</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="twof" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8328" title="Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah" target="_blank">[Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8327" title="Templat halaman panduan resume peribadi berwarna segar" target="_blank">[Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8326" title="Templat Web Resume Kerja Kreatif Pereka" target="_blank">[Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8325" title="Templat laman web syarikat pembinaan kejuruteraan moden" target="_blank">[Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8324" title="Templat HTML5 responsif untuk institusi perkhidmatan pendidikan" target="_blank">[Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8323" title="Templat laman web pusat membeli-belah kedai e-buku dalam talian" target="_blank">[Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8322" title="Teknologi IT menyelesaikan templat tapak web syarikat Internet" target="_blank">[Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8321" title="Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu" target="_blank">[Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="threef" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3078"  target="_blank"  title="Bahan vektor elemen musim panas yang comel (EPS+PNG)">[bahan PNG] Bahan vektor elemen musim panas yang comel (EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3077"  target="_blank"  title="Empat bahan vektor lencana tamat pengajian 2023 merah (AI+EPS+PNG)">[bahan PNG] Empat bahan vektor lencana tamat pengajian 2023 merah (AI+EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3076"  target="_blank"  title="Burung nyanyian dan troli diisi dengan bahan vektor sepanduk musim bunga reka bentuk bunga (AI+EPS)">[gambar sepanduk] Burung nyanyian dan troli diisi dengan bahan vektor sepanduk musim bunga reka bentuk bunga (AI+EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3075"  target="_blank"  title="Bahan vektor topi pengijazahan emas (EPS+PNG)">[bahan PNG] Bahan vektor topi pengijazahan emas (EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3074"  target="_blank"  title="Bahan vektor ikon gunung gaya hitam putih (EPS+PNG)">[bahan PNG] Bahan vektor ikon gunung gaya hitam putih (EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3073"  target="_blank"  title="Bahan vektor siluet superhero (EPS+PNG) dengan jubah warna yang berbeza dan pose yang berbeza">[bahan PNG] Bahan vektor siluet superhero (EPS+PNG) dengan jubah warna yang berbeza dan pose yang berbeza</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3072"  target="_blank"  title="Bahan vektor sepanduk Hari Arbor gaya rata (AI+EPS)">[gambar sepanduk] Bahan vektor sepanduk Hari Arbor gaya rata (AI+EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3071"  target="_blank"  title="Sembilan bahan vektor buih sembang meletup gaya komik (EPS+PNG)">[bahan PNG] Sembilan bahan vektor buih sembang meletup gaya komik (EPS+PNG)</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="fourf" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8328"  target="_blank" title="Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah">[Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8327"  target="_blank" title="Templat halaman panduan resume peribadi berwarna segar">[Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8326"  target="_blank" title="Templat Web Resume Kerja Kreatif Pereka">[Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8325"  target="_blank" title="Templat laman web syarikat pembinaan kejuruteraan moden">[Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8324"  target="_blank" title="Templat HTML5 responsif untuk institusi perkhidmatan pendidikan">[Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8323"  target="_blank" title="Templat laman web pusat membeli-belah kedai e-buku dalam talian">[Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8322"  target="_blank" title="Teknologi IT menyelesaikan templat tapak web syarikat Internet">[Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8321"  target="_blank" title="Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu">[Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu</a>
                            </div>
                        </li>
                                    </ul>
            </div>
            <script>
                var mySwiper = new Swiper('.swiper3', {
                            autoplay: false,//可选选项，自动滑动
                            slidesPerView : 'auto',
                        })
                $('.wzrfourlTab>div').click(function(e){
                    $('.wzrfourlTab>div').removeClass('check')
                    $(this).addClass('check')
                    $('.wzrfourList>ul').css('display','none')
                    $('.'+e.currentTarget.dataset.id).show()
                })
            </script>
        </div>
    </div>
</div>
<footer>
    <div class="footer">
        <div class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p>
        </div>
        <div class="footermid">
            <a href="http://www.php.cn/ms/about/us.html">Tentang kita</a>
            <a href="http://www.php.cn/ms/about/disclaimer.html">Penafian</a>
            <a href="http://www.php.cn/ms/update/article_0_1.html">Sitemap</a>
        </div>
        <div class="footerbottom">
            <p>
                © php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>