java-四十三天---Vue

最新推荐文章于 2025-01-05 16:17:53 发布

原创最新推荐文章于 2025-01-05 16:17:53 发布 · 178 阅读

1 ·

CC 4.0 BY-SA版权

博客回顾了WEB前端技术，重点介绍Vue。包含标准vue应用，讲解了指令区别，还列举多个应用示例，如点击图片转换、设置颜色大小、用条件指令v-if控制列表显示隐藏、使用v-for循环标签，以及下拉框、表单提交、省市二级联动等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 WEB前端技术回顾

2 Vue介绍

3 标准vue应用

4 指令区别

绑定指令
v-bind：绑定属性
{{}}：以原始数据方式绑定  
v-html：以html解析后的方式绑定


事件处理
v-on:click


把属性显示到视图层
v-model

例子

5 点击图片转换

6 7 设置颜色与大小

8 点击列表显示与隐藏（条件指令 v-if）

9 循环标签（v-for）

2(循环加索引)

10 下拉框

11 左边学生表单form，一点提交，自动提交到右边表格

<html>
<head>
    <meta charset="utf-8">
    <title>student</title>
    <script src="js/vue.js"></script>
    <style>
        #right{
            float:right;
            width:550px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="left">
        <form>
            <div>
                <label>学号:</label><input type="text" v-model="stu.no"/></br>
                <label>姓名:</label><input type="text" v-model="stu.name"/></br>
                <label>性别:</label><input type="radio" value="男" v-model="stu.sex"/>男
                                    <input type="radio" value="女" v-model="stu.sex"/>女</br>
                <label>爱好:</label><input type="checkbox" value="跳舞" v-model="stu.hobbies"/>跳舞
                                   <input type="checkbox" value="唱歌" v-model="stu.hobbies"/>唱歌
                                   <input type="checkbox" value="打球" v-model="stu.hobbies"/>打球</br>
                <label>籍贯:</label><select v-model="stu.addr">
                            <option>安徽</option>
                            <option>陕西</option>
                                     </select></br>
                <label>备注:</label><textarea v-model="stu.beizhu"></textarea>

            </div>
            <div>
                <button type="button" @click="add">添加</button>

            </div>
        </form>
    </div>
    <div id="right">
        <table width="100%" border="1">
            <tr>
                <td>序号</td>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>爱好</td>
                <td>籍贯</td>
                <td>备注</td>
                <td>操作</td>
            </tr>
            <tr v-for="(s,index) in stulist">
                <td>{{index+1}}</td>
                <td>{{s.no}}</td>
                <td>{{s.name}}</td>
                <td>{{s.sex}}</td>
                <td>{{s.hobbies}}</td>
                <td>{{s.addr}}</td>
                <td>{{s.beizhu}}</td>
                <td><span @click="remove(index)">删除</span></td>
                <td><span @click="update(index)">修改</span></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>
<script>
    var vue=new Vue({
        el: "#app",
        data:{
            message: "测试",
            stu:{
                no:"001",
                name:"test",
                sex:"男",
                hobbies:[],
                addr:"陕西",
                beizhu:""
            },
            stulist:[]
        },
        methods:{
            add:function(){
                var tmp={};
                tmp.no=this.stu.no;
                tmp.name=this.stu.name;
                tmp.sex=this.stu.sex;
                tmp.hobbies=this.stu.hobbies;
                tmp.addr=this.stu.addr;
                tmp.beizhu=this.stu.beizhu;

                this.stulist.push(tmp);
            },
            remove:function(idx){
                this.stulist.splice(idx,1)
            },
           /* update:function(index){
                var temp={};
                temp.no=this.stu.no;
                temp.name=this.stu.name;
                temp.sex=this.stu.sex;
                temp.hobbies=this.stu.hobbies;
                temp.addr=this.stu.addr;
                temp.beizhu=this.stu.beizhu;
                this.stulist.$set(tmp,index,temp);

            }*/修改部分有问题
        }
    });
</script>

效果图

12 省市二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
 <div id="test" style="width:100%;">

                 <span>二级联动：</span>
                 <select  v-model="indexId">
                    <option v-for="option1 in YX">{{option1.name}}</option>
                 </select>
                 <select>
                    <option v-for="option2 in selection">{{option2.name}}</option>
                 </select>

</div>
</body>
</html>
<script>
    var vue = new Vue({
        el:'#test',
        data:{
            YX:[
                {
                    name:'陕西省',
                    ZY:[
                        {name:'西安市'},
                        {name:'宝鸡市'},
                        {name:'渭南市'},
                        {name:'咸阳市'},
                        {name:'榆林市'},
                        {name:'汉中市'},
                        {name:'商洛市'},
                        {name:'延安市'},
                        {name:'铜川市'},
                    ]
                },
                {
                    name:'安徽市',
                    ZY:[
                        {name:'马鞍山市'},
                        {name:'芜湖市'},
                        {name:'黄山市'},
                        {name:'合肥市'},
                        {name:'安庆市'},
                        {name:'铜陵市'},
                        {name:'淮南市'},
                        {name:'淮北市'},
                        {name:'阜阳市'},
                    ]
                },
            ],
            indexId:""
        },
        computed:{
            selection: function() {
                for (var i = 0; i < this.YX.length; i++) {
                    if (this.YX[i].name === this.indexId) {
                        return this.YX[i].ZY;
                    }
                }
            }
        },

    });

</script>