Vue.js(1)：初体验

最新推荐文章于 2024-09-01 13:33:34 发布

dawn

最新推荐文章于 2024-09-01 13:33:34 发布

阅读量121

点赞数 2

分类专栏： Vue.js + ElementUI 文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/dawn0718/article/details/120480378

版权

Vue.js + ElementUI 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

　　今天晚上开始学习Vue，折腾了快4个小时才完成一个基本练习。
　　开始练习基本语法，只涉及元素、数据、计算方法，完成了练习。
　　后来想加入样式判断，本来用计算方法可以实现，但是想用计算属性就熬人了，关键在获取v-for里面的数据时以及正确的函数写法遇到了问题，反复查资料反复试，熬了2个多小时，不过最终解决了还是有所收获。

　　完成的练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .table td{
	        background-color:#ffffff;
	        height:25px;
	        line-height:200%;
        }
        .normal{color: black;}
        .GT90{color:red;}
        .LT60{color: green;}
        .bold{font-weight: bold;}
    </style>
</head>
<body>
    <div id="demo">
        <!--界面模板-->
        <!--mustache语法-->
        <h1 align="center">{{title}}</h1>
        <table cellpadding="1" cellspacing="1" align="center" class="table" bgcolor="#cccccc">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>语文</td>
                <td>数学</td>
                <td>总分</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item,i) in list" :key="i">
                <td>{{item.Id}}</td>
                <td>{{item.Name}}</td>
                <td clase="normal" v-bind:class="ClassJudge(item.ChineseScore)">{{item.ChineseScore}}</td>
                <td clase="normal" v-bind:class="ClassJudge(item.MathScore)">{{item.MathScore}}</td>
                <td>{{item.ChineseScore + item.MathScore}}</td>
                <td><a href="" @click.prevent="del(i)">删除</a></td>
            </tr>
            <tr>
                <td><input type="text" placeholder="请输入学号" v-model="Id"></td>
                <td><input type="text" placeholder="请输入姓名" v-model="Name"></td>
                <td><input type="text" placeholder="请输入语文成绩" v-model="ChineseScore"></td>
                <td><input type="text" placeholder="请输入数学成绩" v-model="MathScore"></td>
                <td></td>
                <td><input type="button" value="新增" @click="btnAdd"></td>
            </tr>
            <tr align="right">
                <td colspan="6"><input type="text" placeholder="请输入搜索的姓名" class="t1" v-model="SearchName"><input type="button" value="搜索" class="t2" @click="btnSearch"></td>
            </tr>
        </table>
    </div>

    <script>
        var vm=new Vue({
            el:"#demo",//css选择器
            data:{
                //界面中Vue元素的相关数据
                title:"学生成绩表",
                Id:'',
                Name:'',
                ChineseScore:0.0,
                MathScore:0.0,
                SearchName:'',
                list:[
                    {Id:101,Name:'小明',ChineseScore:81.5,MathScore:87},
                    {Id:102,Name:'小黄',ChineseScore:61,MathScore:47.5},
                    {Id:103,Name:'小丽',ChineseScore:89.5,MathScore:83},
                    {Id:104,Name:'小宋',ChineseScore:59,MathScore:97},
                ]
            },
            methods:{
                btnAdd(){
                var student={Id:this.Id,
                            Name:this.Name,
                            ChineseScore:parseFloat(this.ChineseScore),
                            MathScore:parseFloat(this.MathScore)
                        }
                this.list.push(student)
                this.Id='',
                this.Name='',
                this.ChineseScore=0,
                this.MathScore=0
                },
                del(i){
                    this.list.splice(i,1)
                },
                btnSearch(){
                    var Newstudent=[]
                    this.list.forEach(item => {
                        if(item.Name.indexOf(this.SearchName)!=-1){
                            Newstudent.push(item)

                        }
                    });
                    this.list=Newstudent
                }
            },
            computed:{
                ClassJudge:function(){
                    return function(val){
                        if(parseFloat(val)>85) { return {GT90:true,bold:true} }
                        if(val<60){ return {LT60:true,bold:true}}
                    }
                }
            }
        })
    </script>
</body>
</html>

　　结果图：

　　总结：

　　1、Vue入门很快很容易，但是学好学精并不容易，内容太多了，尤其是后面要使用脚手架最终自己搭建框架有难度；

　　2、脚本基本上是固定写法，但是很灵活，比如同样的问题解决手段就很多，技巧很多，看掌握的程度；

　　3、很多前端开发都有这个框架，所以要学而且要学好。

dawn

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Vue.js(1)：初体验

　　今天晚上开始学习Vue，折腾了快4个小时才完成一个基本练习。　　开始练习基本语法，只涉及元素、数据、计算方法，完成了练习。　　后来想加入样式判断，本来用计算方法可以实现，但是想用计算属性就熬人了，关键在获取v-for里面的数据时以及正确的函数写法遇到了问题，反复查资料反复试，熬了2个多小时，不过最终解决了还是有所收获。　　完成的练习：<!DOCTYPE html><html lang="en"><head> <meta charset=
复制链接

扫一扫

专栏目录