vue(二)

1.选择器

在这里插入图片描述

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
head>
<body>
<div id="app">
    <template>
        <el-select @change="handleChange" v-model="value" placeholder="请选择">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            el-option>
        el-select>
    template>

div>
body>

<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">script>

<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js">script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '双皮奶',
                    label: '双皮奶'
                }, {
                    value: '蚵仔煎',
                    label: '蚵仔煎'
                }, {
                    value: '龙须面',
                    label: '龙须面'
                }, {
                    value: '北京烤鸭',
                    label: '北京烤鸭'
                }],
                value: ''
            }
        },
        methods: {
            handleChange(value){
                v.$message(value);
            }
        }
    })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

2.表格

在这里插入图片描述

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
head>
<body>
<div id="app">
    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            el-table-column>
        el-table>
    template>
    <h1>员工列表h1>
    <template>
        <el-table
                :data="empArr"
                style="width: 100%">
            <el-table-column
                    type="index"
                    label="编号"
                    width="180">
            el-table-column>
            <el-table-column
                    prop="name"
                    label="名字"
                    width="180">
            el-table-column>
            <el-table-column
                    prop="salary"
                    label="工资"
                    width="180">
            el-table-column>
            <el-table-column
                    prop="job"
                    label="工作"
                    width="180">
            el-table-column>
            
            <el-table-column label="操作">
                <template slot-scope="scope">
                    
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除el-button>
                template>
            el-table-column>
            
        el-table>
    template>
div>
body>

<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">script>

<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js">script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                empArr:[{name:"悟空",salary:600,job:"程序员"},
                    {name:"八戒",salary:700,job:"销售"},
                    {name:"沙僧",salary:800,job:"讲师"}]
            }
        },
        methods: {
            handleEdit(i,emp){
                v.$message(i+":"+emp.name);
            },
            handleDelete(i,emp){
                //删除数组中的数据
                v.empArr.splice(i,1);
            }
        }
    })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

3.员工列表练习

在这里插入图片描述

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
head>
<body>
<div id="app">
    <input type="text" placeholder="姓名" v-model="emp.name">
    <input type="text" placeholder="工资" v-model="emp.salary">
    <input type="text" placeholder="工作" v-model="emp.job">
    <input type="button" value="添加" @click="insert()">

    <h1>员工列表h1>
    <template>
        <el-table :data="empArr" style="width: 100%">
            <el-table-column label="编号" type="index" width="180">el-table-column>
            <el-table-column label="名字" prop="name" width="180">el-table-column>
            <el-table-column label="工资" prop="salary" width="180">el-table-column>
            <el-table-column label="工作" prop="job">el-table-column>
            
            <el-table-column label="操作">
                <template slot-scope="scope">
                    
                    <el-button size="mini" @click="handleEdit(scope.$index,scope.row)">编辑el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除el-button>
                template>
            el-table-column>
            
        el-table>
    template>
div>
body>

<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">script>

<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js">script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                emp:{
                    name:"",
                    salary:"",
                    job:""
                },
                empArr:[{name:"悟空",salary:600,job:"程序员"},
                    {name:"八戒",salary:700,job:"销售"},
                    {name:"沙僧",salary:800,job:"讲师"}]
            }
        },
        methods: {
            insert(){
              v.empArr.push({name:v.emp.name,salary:v.emp.salary,job:v.emp.salary});
            },
            handleEdit(i,emp){

            },
            handleDelete(i,emp){
                v.empArr.splice(i,1);
            }
        }
    })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

4.导航菜单栏

在这里插入图片描述

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
head>
<body>
<div id="app">
    
    <el-menu :default-active="activeIndex" class="el-menu-demo"
             mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">处理中心el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作台template>
            <el-menu-item index="2-1">选项1el-menu-item>
            <el-menu-item index="2-2">选项2el-menu-item>
            <el-menu-item index="2-3">选项3el-menu-item>
            <el-submenu index="2-4">
                <template slot="title">选项4template>
                <el-menu-item index="2-4-1">选项1el-menu-item>
                <el-menu-item index="2-4-2">选项2el-menu-item>
                <el-menu-item index="2-4-3">选项3el-menu-item>
            el-submenu>
        el-submenu>
        <el-menu-item index="3" disabled>消息中心el-menu-item>
        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理a>el-menu-item>
    el-menu>
    <div class="line">div>
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1">处理中心el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作台template>
            <el-menu-item index="2-1">选项1el-menu-item>
            <el-menu-item index="2-2">选项2el-menu-item>
            <el-menu-item index="2-3">选项3el-menu-item>
            <el-submenu index="2-4">
                <template slot="title">选项4template>
                <el-menu-item index="2-4-1">选项1el-menu-item>
                <el-menu-item index="2-4-2">选项2el-menu-item>
                <el-menu-item index="2-4-3">选项3el-menu-item>
            el-submenu>
        el-submenu>
        <el-menu-item index="3" disabled>消息中心el-menu-item>
        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理a>el-menu-item>
    el-menu>
    <h1>自定义导航菜单h1>
    <el-menu :default-active="activeIndex" class="el-menu-demo"
             mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">精彩活动el-menu-item>
        <el-menu-item index="2">当季女装el-menu-item>
        <el-menu-item index="3">品牌男装el-menu-item>
        <el-menu-item index="4">环球美食el-menu-item>
    el-menu>
div>
body>

<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">script>

<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js">script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: '4',
                activeIndex2: '1'
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                //key代表点击的位置,  keypath 代表位置路径
                console.log(key, keyPath);
            }
        }
    })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

5.布局

在这里插入图片描述

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .c1{
            border: 1px solid red;border-radius: 5px;
            height: 50px;
        }
    style>
head>
<body>
<div id="app">
    
    <el-row>
        
        <el-col span="12"><div class="c1">aaadiv>el-col>
        <el-col span="12"><div class="c1">aaadiv>el-col>
    el-row>
    <el-row gutter="20">
        <el-col span="8"><div class="c1">div>el-col>
        <el-col span="8"><div class="c1">div>el-col>
        <el-col span="8"><div class="c1">div>el-col>
    el-row>
    
    <div style="width: 1200px;margin: 0 auto">
    <el-row>
        <el-col span="12"><div class="c1">aaadiv>el-col>
        <el-col span="12"><div class="c1">bbbdiv>el-col>
    el-row>
    div>
    
    <div style="width: 1200px;margin: 0 auto">
        <el-row>
            <el-col span="6"><div class="c1">aaadiv>el-col>
            <el-col span="6"><div class="c1">bbbdiv>el-col>
            <el-col span="6"><div class="c1">aaadiv>el-col>
            <el-col span="6"><div class="c1">bbbdiv>el-col>
        el-row>
    div>
    
    <div style="width: 1200px;margin: 0 auto">
        <el-row gutter="30">
            <el-col span="4"><div class="c1">div>el-col>
            <el-col span="8"><div class="c1">div>el-col>
            <el-col span="12"><div class="c1">div>el-col>
        el-row>
    div>
    <h1>分栏偏移h1>
    <el-row>
        <el-col span="20" offset="2"><div class="c1">div>el-col>
    el-row>
div>
body>

<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">script>

<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js">script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {

            }
        },
        methods: {

        }
    })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

6.布局容器

在这里插入图片描述

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-header{
            background-color: red;
        }
        .el-main{
            background-color: green;
            height: 300px;
        }
        .el-footer{
            background-color: blue;
        }
        .el-aside{
            background-color: yellow;
        }
    style>
head>
<body>
<div id="app">
    <el-container>
        <el-header>Headerel-header>
        <el-main>Mainel-main>
    el-container>
    <h1>上中下h1>
    <el-container>
        <el-header>Headerel-header>
        <el-main>Mainel-main>
        <el-footer>Footerel-footer>
    el-container>
    <h1>左右h1>
    <el-container>
        <el-aside width="200px">Asideel-aside>
        <el-main>Mainel-main>
    el-container>
    <el-container>
        <el-header>Headerel-header>
        <el-container>
            <el-aside width="200px">Asideel-aside>
            <el-main>Mainel-main>
        el-container>
    el-container>
    <h1>上,下(左,右(上,下))h1>
    <el-container>
        <el-header>Headerel-header>
        <el-container>
            <el-aside width="200px">Asideel-aside>
            <el-container>
                <el-main>Mainel-main>
                <el-footer>Footerel-footer>
            el-container>
        el-container>
    el-container>
div>
body>

<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">script>

<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js">script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {

            }
        },
        methods: {

        }
    })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

7.走马灯

在这里插入图片描述

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
head>
<body>
<div id="app">
    <template>
        <div class="block" style="width: 350px">
            <span class="demonstration">默认 Hover 指示器触发span>
            <el-carousel height="150px">
                
                <el-carousel-item v-for="item in 3">
                    <h3 class="small">{{ item }}h3>
                el-carousel-item>
            el-carousel>
        div>
        <div class="block" style="width: 350px">
            <span class="demonstration">Click 指示器触发span>
            <el-carousel trigger="click" height="150px">
                <el-carousel-item v-for="item in 4">
                    <h3 class="small">{{ item }}h3>
                el-carousel-item>
            el-carousel>
        div>
    template>
    <h1>图片轮播图h1>
    <el-carousel height="150px" style="width: 300px">
        <el-carousel-item v-for="url in arr">
            <img :src="url" width="100%" alt="">
        el-carousel-item>
    el-carousel>
    <h1>卡片化h1>
    <template>
        <el-carousel :interval="4000" style="width:300px"
                     type="card" height="170px">
            <el-carousel-item v-for="url in arr">
                <img :src="url" width="100%" height="170" alt="">
            el-carousel-item>
        el-carousel>
    template>
div>
body>

<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">script>

<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js">script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                arr:["../imgs/b1.jpg","../imgs/b2.jpg","../imgs/b3.jpg"]
            }
        },
        methods: {

        }
    })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

8.卡片

在这里插入图片描述

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
head>
<body>
<div id="app">
    <div style="width: 200px">
        <el-card>
            <h1>这是h1h1>
        el-card>
    div>
    <el-row>
        <el-col span="4" v-for="item in 6">
            <el-card>
                <h1>{{item}}h1>
                <img src="../imgs/a.jpg" width="100%" alt="">
            el-card>
        el-col>
    el-row>
div>
body>

<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">script>

<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js">script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {

            }
        },
        methods: {

        }
    })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

相关阅读:
基于SqlSugar的开发框架循序渐进介绍（17）-- 基于CSRedis实现缓存的处理
 前端工程化知识系列（5）
HCIP---企业网的三层架构
 以php为后端，vue为前端的租房微信小程序
 OpenGL：开放图形库
 318. 最大单词长度乘积
 SpringCloud 客户端负载均衡：Ribbon
uniapp打包微信小程序。报错：https://api.weixin.qq.com 不在以下 request 合法域名列表
 java-php-python-ssm-在线投稿系统-计算机毕业设计
 VMware的三种连接模式
原文地址：https://blog.csdn.net/longgetaotao_06/article/details/126633051