正文

Vue3 学习笔记

Async
Async V管理员 /570阅读/0评论
1126

安装vue3

1、可以使用npm进行一键安装

npm create vue@latest

2、使用cdn进行安装

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

ref reactive return

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">{{ msg }}<p>网站名称：{{ web.name }} 网站域名：{{ web.domain }} 网站日期：{{ web.data }}</p><p>ref数据：{{ref_data}}</p></div>

</body>
<script>
    Vue.createApp({
        setup(){
            // ref：接受一个内部值，返回一个可更改、响应式的对象
            const ref_data = Vue.ref('这是一个ref定义的数据')

            // ref对象通过调用value值对属性进行修改
            ref_data.value = '这是更改后的ref数据'

            // reactive: 接受一个对象，返回一个可更改，响应式的对象
            const web = Vue.reactive({
                name: '编程笔记',
                domain: 'www.codesnote.com'
            })
            // 通过调用对应的键对数据进行更改
            web.domain = 'codesnote.com'
            // 新增一个键值对
            web.data = 2024

            // Both ref and reactive objects require return returns to work
            return {
                msg: '测试数据',
                web,
                ref_data
            }
        }
    }).mount('#app')
</script>
</html>

v-on 事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 事件绑定</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>

    <div id="app">
        <h1>Vue3 事件绑定</h1>
        <P>网站名称：{{ web.name}}</P>

        <button v-on:click="changeWebName">改变网站名称</button>

        <p>网站域名：{{ web.domain }}</p>
        <!-- 简写 -->
        <button @:click="changeWebDomain">改变网站域名</button>
    </div>

</body>
<script>
    const {createApp, reactive} = Vue
    const app = createApp({
        setup(){
            const web = reactive({
                name: '编程笔记',
                domain: 'www.codesnote.com'
            });
            const changeWebName = function(){
                web.name = '编程日记'
            }
            const changeWebDomain = function(){
                web.domain = 'codesnote.com'
            }
            return {
                web,
                changeWebDomain,
                changeWebName
            }
        }
    })
    app.mount('#app')

</script>
</html>

条件渲染

v-if、v-else、v-else-if

v-if、v-else、v-else-if这三个指令实在条件表达式为真的时候才将组件进行渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 事件绑定</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>

    <div id="app">
        <h1>Vue3 v-if v-eles-if v-else指令</h1>
        <p v-if="english === 'A'">我是A</p>
        <p v-else-if="english === 'B'">我是B</p>
        <p v-else>我既不是A也不是B</p>
        <button @click="changeA">A</button>
        <button @click="changeB">B</button>
        <button @click="changeC">C</button>
    </div>

</body>
<script>
    const {createApp, ref} = Vue
    createApp({
        setup(){
            const english = ref('A')

            const changeA = ()=>{
                english.value = 'A'
            }

            const changeB = () => {
                english.value = 'B'
            }

            const changeC = () => {
                english.value = 'C'
            }
            return {
                english,
                changeA,
                changeB,
                changeC
            }

        }
    }).mount('#app')

</script>
</html>

v-show

v-show指定会先将组件渲染出来，然后再通过css进行控制显示或者消失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 事件绑定</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>

    <div id="app">
        <h1>Vue3 v-show 指令</h1>
        <p v-show="showBool">我是v-show</p>
        <button @click="change">Change</button>
    </div>

</body>
<script>
    const {createApp, ref} = Vue
    const app = createApp({
        setup(){
            const showBool = ref(false)

            const change = ()=>{
                showBool.value = !showBool.value
            }

            return {
                showBool,
                change
            }
        }
    })
    app.mount('#app')

</script>
</html>

<template>上的v-if

因为 v-if 是一个指令，他必须依附于某个元素。但如果我们想要切换不止一个元素呢？在这种情况下我们可以在一个 <template> 元素上使用 v-if，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 template元素商的v-if</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <template v-if="ok">
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </template>
        <button @click="change">change</button>
    </div>

</body>
<script>
    const {createApp, ref} = Vue
    const app = createApp({
        setup(){
            const ok = ref(true)

            const change = ()=>{
                ok.value = !ok.value
            }

            return {
                ok,
                change
            }
        }
    })
    app.mount('#app')

</script>
</html>

类与样式绑定

绑定 HTML class

1、绑定对象

Vue会判断绑定对象的真假值，来动态决定是否要将键名添加到class字段里。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 类的绑定之对象绑定</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1 v-bind:class="{active: isActive}">Vue is good!</h1>
        <button @click="change">点击</button>
    </div>

</body>
<script>
    const {createApp, ref} = Vue
    const app = createApp({
        setup(){
            const isActive = ref(true)

            const change = () => {
                isActive.value = !isActive.value
            }

            return {
                isActive,
                change
            }
        }
    })
    app.mount('#app')
</script>
<style>
.active{
    color: red;
}
</style>
</html>

2、绑定数组

使用数组绑定class类名的时候也可以通过结合对象绑定以及三木运算符动态绑定class类名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 类的绑定之对象绑定</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p b-bind:class="['active', 'fontstrong']">纯数组绑定class类名</p>
        <p v-bind:class="[{active:isActive}, 'fontstrong']">数组内使用对象动态定义class类名</p>
        <p v-bind:class="[isActive?'active':'', 'fontstrong']">数组内使用三目运算符动态定义class类名</p>
        <button @click="change">点击</button>
    </div>

</body>
<script>
    const {createApp, ref} = Vue
    const app = createApp({
        setup(){
            const isActive = ref(true)

            const change = () => {
                isActive.value = !isActive.value
            }

            return {
                isActive,
                change
            }
        }
    })
    app.mount('#app')
</script>
<style>
.active{
    color: red;
    font-weight: bold;
}
</style>
</html>

绑定HTML Style

绑定style和类的绑定差不多。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 Style样式绑定</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">

        <p :style="{'color':colorVar, 'font-size':'30px'}">对象添加style</p>
        <button @click="change">变颜色</button>

        <p :style="['color:green', 'font-size:20px']">数组添加style</p>

        <p :style="[{'color':colorVar}, 'font-size:20px']">数组+对象添加style</p>
    </div>

</body>
<script>
    const {createApp, ref} = Vue
    const app = createApp({
        setup(){
            const colorVar = ref('red')

            const change = () => {
                colorVar.value = colorVar.value === 'red' ? 'green' : 'red'
            }

            return {
                colorVar,
                change
            }
        }
    })
    app.mount('#app')
</script>
<style>
.active{
    color: red;
    font-weight: bold;
}
</style>
</html>

遍历数组或对象 v-for

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 遍历数组或对象 v-for</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(value, index) in data.number">
                index=> {{ index }} : value=> {{ value }}
            </li>
        </ul>

        <ul>
            <li v-for="value in data.user">
                value=> {{ value }}
            </li>
        </ul>

        <ul>
            <li v-for="(value, key) in data.user">
                key=> {{ key }} : value=> {{ value }}
            </li>
        </ul>

        <ul>
            <li v-for="(value, key, index) in data.user">
                index=> {{ index }} : key=> {{ key }} : value=> {{ value }}
            </li>
        </ul>

        <ul>
            <!-- <template> 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染  -->
            <template v-for="(value, key, index) in data.user">
                <li v-if="index == 1">
                    index=> {{ index }} : key=> {{ key }} : value=> {{ value }}
                </li>
            </template>
        </ul>

        <ul>
            <!-- :key="value.id" 为 每个 li 元素设置一个唯一的 key 值 -->
            <li v-for="(value, index) in data.teacher" :title="value.name" :key="value.id">
                index=> {{ index }} : value.id=>{{ value.id }} value.name=>{{ value.name }} value.web=>{{ value.web }}
            </li>
        </ul>
    </div>

</body>
<script>
    const { createApp, ref, reactive } = Vue
    const app = createApp({
        setup() {
            const data = reactive({
                number: ["十", "十一", "十二"], //数组
                user: { //对象
                    name: "Luna",
                    gender: "女"
                },
                teacher: [ //包含两个对象的数组
                    { id: 100, name: "坤坤", web: "codesnote.com" },
                    { id: 101, name: "David", web: "www.codesnote.com" }
                ]
            })

            return {
                data
            }
        }
    })

    app.mount('#app')
</script>

</html>

双向数据绑定v-model

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 双向数据绑定`v-model`</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <h3>文本框 {{ data.text }}</h3>
        <h3>单选框 {{ data.radio }}</h3>
        <h3>复选框 {{ data.checkbox }}</h3>
        <h3>记住密码 {{ data.remember }}</h3>
        <h3>下拉框 {{ data.select }}</h3>

        <!-- 单向数据绑定 当数据发生改变时, 视图会自动更新. 但用户手动更改 input 的值, 数据不会自动更新 -->
        单向数据绑定 <input type="text" :value="data.text">

        <hr>
        <!-- 
            双向数据绑定 当数据发生改变时, 视图会自动更新. 当用户手动更改 input 的值, 数据也会自动更新
            对于 <input type="text">, v-model 绑定的是 input 元素的 value 属性
        -->
        双向数据绑定 <input type="text" v-model="data.text">

        <hr>
        <!-- 
            单选框
            对于 <input type="radio">, v-model 绑定的是 input 元素的选中状态
        -->
        <input type="radio" v-model="data.radio" value="1">写作
        <input type="radio" v-model="data.radio" value="2">画画

        <hr>
        <!-- 
            复选框
            对于 <input type="checkbox">, v-model 绑定的是 input 元素的选中状态
        -->
        <input type="checkbox" v-model="data.checkbox" value="a">写作
        <input type="checkbox" v-model="data.checkbox" value="b">画画
        <input type="checkbox" v-model="data.checkbox" value="c">运动

        <hr>
        <!-- 记住密码 -->
        <input type="checkbox" v-model="data.remember">记住密码

        <hr>
        <!-- 
            下拉框
            对于 <select>, v-model 绑定的是 select 元素的选中状态
        -->
        <select v-model="data.select">
            <option value="">请选择</option>
            <option value="A">写作</option>
            <option value="B">画画</option>
            <option value="C">运动</option>
        </select>
    </div>

</body>
<script>
    const {createApp, ref, reactive} = Vue

    const app = createApp({
        setup(){
            const data = reactive({
                text: '这是一个默认文本',
                radio: '',
                checkbox: [],
                remember: false,
                select:''
            })

            return {
                data
            }
        }
    })

    app.mount('#app')
</script>

</html>

数据渲染 v-text 和 v-html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 数据渲染 v-text 和 v-html</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        使用v-text插入文本内容：<p v-text="textData"></p>
        <hr>
        使用v-text插入html内容：<p v-text="htmlData"></p>
        <hr>
        使用v-html插入html内容：<p v-html="htmlData"></p>
    </div>

</body>
<script>
    const {createApp, ref, reactive} = Vue
    const app = createApp({
        setup(){
            const textData = ref('这是一个默认文本')
            const htmlData = ref('<span style="color:red">这是一段html代码<span>')

            return {
                textData,
                htmlData
            }
        }
    })
    app.mount('#app')
</script>

</html>

计算属性computed

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 计算属性computed</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 函数调用 -->
         函数调用
        <p>{{calc()}}</p>
        <p>{{calc()}}</p>
        <hr>
        计算属性调用
        <!-- 计算属性调用 -->
        <p>{{calcs}}</p>
        <p>{{calcs}}</p>

        通过对上面两个的调用对比可以发现，函数在每调用一次都会重新进行计算，而计算属性只要在值没有变化的时候就就会只调用一次
    </div>

</body>
<script>
    const {createApp, ref, reactive, computed} = Vue
    const app = createApp({
        setup(){
            const calc = () => {
                num = 10 + 10
                console.log('调用函数')
                return num
            }

            const calcs = computed(()=>{
                num = 10 + 10
                console.log('计算属性')
                return num
            })

            return {
                calc,
                calcs
            }
        }
    })
    app.mount('#app')
</script>

</html>

侦听器 watch and watchEffect

watch监听器的使用方法

watch(监听数据, (新数据, 老数据) => {
  // 处理逻辑
});

watchEffect自动监听器的使用方法

watchEffect(() => {
  // 业务逻辑（只有在这里的数据进行了变化，这里面的事件才会被触发）
});
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 watch侦听器</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        爱好
        <select v-model="hobby">
            <option value="">请选择</option>
            <option value="1">写作</option>
            <option value="2">画画</option>
            <option value="3">运动</option>
        </select>

        <hr>

        年
        <select v-model="date.year">
            <option value="">请选择</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
            <option value="2025">2025</option>
        </select>

        月
        <select v-model="date.month">
            <option value="">请选择</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
    </div>

</body>
<script>
    const {createApp, ref, reactive, watch, watchEffect } = Vue
    const app = createApp({
        setup(){
            const hobby = ref("")
            const date = reactive({
                year:'',
                month:''
            })

            // 创建一个变量储存旧数据以实现自动监听可以获取到旧数据
            let oldYear = ''

            watch(hobby, (newData, oldData)=> {
                if(newData == '1'){
                    console.log('写作')
                }
            })

            // 自动监听
            watchEffect(() => {
                if(date.year !== oldYear){
                    console.log('老数据：', oldYear, '新数据：', date.year)
                }
                oldYear = date.year
            })

            return {
                hobby,
                date,
            }
        }
    })
    app.mount('#app')
</script>

</html>

案例大全

轮播图演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 轮播图实例</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>

    <div id="app">
        <h1> Vue 实现轮播图演示</h1>
        <p><img :src=`./images/${imgnum}.png` style="width: 500px; height: 300px;" alt=""></p>
        <div id="page">
            <button @click="prePage">上一页</button>
            <button @click="nextPage">下一页</button>
        </div>
        <span>当前页码 {{ imgnum }}/3</span>
    </div>

</body>
<script>
    const {createApp, ref} = Vue
    const app = createApp({
        setup(){
            const imgnum = ref(1)

            const prePage = () => {
                if (imgnum.value <= 1){
                    imgnum.value = 3
                }else{
                    imgnum.value -= 1
                }
            }

            const nextPage = () => {
                if (imgnum.value >= 3){
                    imgnum.value = 1
                }else{
                    imgnum.value += 1
                }
            }
            return {
                imgnum,
                prePage,
                nextPage
            }
        }
    })
    app.mount('#app')
</script>
<style>
    h1 {
        display: flex;
        justify-content: center;
        color: rgb(56, 116, 38);
    }
    #app {
        display: flex;
        flex-direction: column;
        justify-content: center;

    }
    #app p, #page, #app span {
        display: flex;
        justify-content: center;
    }
    button{
        padding: 5px 10px;
        margin: 0 10px;
        cursor: pointer;
    }
    #app span{
        color: #777;
        font-size: 15px;
        margin: 10px;
    }
</style>
</html>

表单增删改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 表单增删改</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <input v-model.trim="formList.userName" type="text" placeholder="请输入用户名称">
        <input v-model.trim="formList.userAge" type="text" placeholder="请输入用户年龄">
        <button @click="addData">添加</button>
        <button @click="clear">清空</button>
        <ul>
            <li v-for="(userInfo, index) in formList.userList">名字：{{ userInfo.name }} 年龄：{{ userInfo.age }} <span @click="del(index)">删除</span></li>
        </ul>

    </div>
</body>
<script>
    const {createApp, ref, reactive} = Vue
    const app = createApp({
        setup(){
            const formList = reactive({
                userName: '',
                userAge: '',
                userList:[
                    {
                        "name": "王五",
                        "age": "30"
                    },
                    {
                        "name": "赵六",
                        "age": "28"
                    },
                    {
                        "name": "孙七",
                        "age": "22"
                    },
                    {
                        "name": "周八",
                        "age": "35"
                    },
                    {
                        "name": "吴九",
                        "age": "40"
                    },
                    {
                        "name": "郑十",
                        "age": "29"
                    },
                    {
                        "name": "王十一",
                        "age": "26"
                    },
                    {
                        "name": "冯十二",
                        "age": "32"
                    },
                    {
                        "name": "陈十三",
                        "age": "25"
                    },
                    {
                        "name": "褚十四",
                        "age": "38"
                    }   
                ]
            })

            const addData = () => {
                if (formList.userName === '' || formList.userAge === ''){
                    alert('哟个户名或者年龄不得为空')
                    return false
                }
                let userInfo = {'name': formList.userName, 'age': formList.userAge}
                formList.userList.push(userInfo)
            }

            const del = (index) => {
                formList.userList.splice(index, 1)
            }

            const clear=()=>{
                formList.userList = []
            }

            return {
                formList,
                addData,
                del, clear
            }

        }
    })
    app.mount('#app')
</script>
<style>
    ul {
        padding: 0;
        margin: 10px;
    }
    li {
        margin: 10px;
        list-style: none;
    }
    li span {
        background-color: red;
        color: white;
        padding: 2px 5px;
    }
    input{
        height: 20px;
        margin-right: 10px;
        border: 1px solid #eee;
        /* outline: 1px solid skyblue; */
    }
    button {
        background-color: #eee;
        margin: 0 10px;
        border: 1px solid skyblue;
    }
</style>
</html>

购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 购物车案例</title>
    <!-- 引入vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>
<body>
    <div id="app">
        <table>
            <tr>
                <td><input type="checkbox" @click="checkAll" v-model="list.checkAllStatus"></td>
                <td>商品</td>
                <td>单价</td>
                <td>库存</td>
                <td>数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="(value,index) of list.data">
                <td><input type="checkbox" @click="changeStatus(index)" v-model="value.status"></td>
                <td>{{value.name}}</td>
                <td>{{value.price}}</td>
                <td>{{value.stock}}</td>
                <td> <button @click="sub(index)">-</button> {{value.number}} <button @click="add(index)">+</button></td>
                <td><button @click="del(index)">删除</button></td>
            </tr>
            <tr><td>总价：{{ total }}</td></tr>
        </table>
    </div>
</body>
<script>
    const {createApp, reactive, ref, watchEffect} = Vue;
    const app = createApp({
        setup(){
            const total  = ref(0)
            const list = reactive({
                checkAllStatus:false,
                data: [{
                    status:false,
                    id: 1,
                    name: "铅笔",
                    price: 10,
                    number: 1,
                    stock: 3
                },
                {
                    status: false,
                    id: 2,
                    name: "鼠标",
                    price: 20,
                    number: 2,
                    stock: 5
                },
                {
                    status: false,
                    id: 3,
                    name: "键盘",
                    price: 30,
                    number: 1,
                    stock: 6
                }],
            })

            const sub = function(index){
                if(list.data[index].number > 1){
                    list.data[index].number -= 1
                }else{
                    list.data[index].number = 1
                }  
            }

            const add = function(index){
                if(list.data[index].number < list.data[index].stock){
                    list.data[index].number += 1
                }else{
                    list.data[index].number = list.data[index].stock
                }
            }

            const del = function(index){
                list.data.splice(index, 1)
            }

            const changeStatus = function(index){
                list.data[index].status = !list.data[index].status
            }

            const checkAll = function(){

                list.data.forEach((value) => {
                    if (list.checkAllStatus === false) {
                        value.status = true
                    }else{
                        value.status = false
                    }
                })

            }

            watchEffect(()=>{
                let trueStatusNum = 0
                total.value = 0
                list.data.forEach((value) => {
                    if(value.status){
                        total.value += value.price * value.number
                        trueStatusNum += 1
                    } 
                });

                if(trueStatusNum !== list.data.length){
                    list.checkAllStatus = false

                }else{
                    list.checkAllStatus = true
                }

            })


            return {
                total,
                list,
                sub, add, del, changeStatus, checkAll
            }
        }
    })
    app.mount('#app')

</script>
    <style>
        #app tr{
            height: 30px;
            border: 1px solid #eee;
        }
        #app td{
            padding: 0 20px;
        }
        #app tr:first-child{
            background-color: #eee;
        }
    </style>
</html>
除非注明，否则均为后台设置版权信息原创文章，转载或复制请以超链接形式并注明出处。