Vue 的 form的增删改查

就是日常的增删改查这个比较好理解直接全段代码上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>影时光 —— 影评助手</title>
    <script src="js/vue.min.js"></script>
    <script src="js/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="css/moive_time.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>
<body>

    <div id="app">
        <div class="page">
            <p class="title">影时光影评助手</p>
            <i class="iconfont icon-tianjia" id="ad" @click="add"></i>
            <ul>
                <li v-for="(obj,index) in list">
                    <img :src="obj.myurl" alt="" >
                    <div class="word">
                        <h3 class="movie_tit">{{obj.tit}}</h3>
                        <p class="movie_con">{{obj.con}}</p>
                    </div>
                    <div class="btns">
                        <i class="iconfont icon-shoucang2" @click="heart"></i>
                        <i class="iconfont icon-xiugai" @click="xg(index)"></i>
                <i class="iconfont icon-changyonggoupiaorenshanchu" @click="del(index)"></i>
                    </div>
                </li>
            </ul>
        </div>
        <div class="shade" v-if="flag">
            <div class="popup">
                <p class="title">影时光影评助手</p>
                <div class="pic">
                    <label for="fil" >
                        <i class="iconfont icon-tianjia1" id="add_pic"></i>
                    </label>
                    <input type="file" id="fil"  @change="imgchange">
                    <img v-bind:src="img_url"   :class="{imgg:flag03}" alt="">
                </div>
                <div class="pic_word">
                    <p class="sc"><i class="iconfont icon-shangchuan1" id="sc"></i>点击上传</p>
                </div>
                <input type="text" id="ipt"  v-model="tit" placeholder="在此处填写电影名...">
                <textarea placeholder="在此处创作影评..."  v-model="con" id="area" name="" cols="30" rows="10"></textarea>
                <button id="btn" @click="setsubm">{{subm}}</button>
                <i class="iconfont icon-tabguanbi" id="closed" @click="closed"></i>
            </div>
        </div>
    </div>
    <script src="js/movie.js"></script>
</body>
</html>

movie.js;每每都在感慨蓝孩子们的耐心指数。

//获取图片路径
function getURL(file) {
    var url = "" ;
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}

//vue

var app = new Vue({
    el:"#app",
    data:{
        flag:false,//控制弹框
        subm:"",
        flag02:false,//控制添加or修改
        list:[
            {
                myurl:"https://b-ssl.duitang.com/uploads/item/201501/28/20150128162644_u5J3e.thumb.224_0.png",
                tit:"千与千寻",
                con:"每次看这些神作的时候想到这是动画片这是一群牛人一笔一笔画出来的,就觉得漏看掉一帧都实在是对不起他们啊",
            },
            {
                myurl:"https://b-ssl.duitang.com/uploads/item/201503/30/20150330234016_LcxKw.thumb.224_0.jpeg",
                tit:"王牌特工：特工学院 Kingsman",
                con:"卧槽这喜剧漫画感太燃了，爆头爆出了大烟花！两代Kingsman都帅到掉渣，尤其西装革履的费斯叔，看得我手捂心口恨不得就地捐出自己的膝盖啊！以后不要再问“像绅士一样杀人究竟哪家强”了，年度爆米花，一定就是它！",
            },
            {
                myurl:"https://b-ssl.duitang.com/uploads/item/201506/25/20150625223336_fJsat.thumb.224_0.jpeg",
                tit:"死侍 Deadpool",
                con:"超级英雄界的一缕清风~漫威英雄界的黄色段子手~",
            },
            {
                myurl:"https://b-ssl.duitang.com/uploads/item/201408/02/20140802150927_kfBxc.thumb.224_0.jpeg",
                tit:"绝命毒师",
                con:"  前几天开始看这部美国电视连续剧，昨晚看完，泣不成声。擦干眼泪，我决定写一篇观后感。影片从一开场就戳破了美国浮华的外衣，恰如我国西北城乡结合部的城市，破败的街道，荒芜的郊区……完全不同于以前从美国电影上看到的繁华，或许这才是真正的美国吧。",
            },
            {
                myurl:"https://b-ssl.duitang.com/uploads/item/201602/23/20160223154336_GLdVM.thumb.224_0.jpeg",
                tit:"猩球崛起",
                con:"  《猩球崛起》是《决战猩球》的前传，但猩猩反人类与人类反猩猩之间的视角转换让两部影片在人物定性和情感宣泄的角度上呈现出完全相反的态势，而这两者之间的因果关系则共同构建了一个粗暴而直接的反乌托邦主题，人类在用膨胀的科技霸权主义为自己掘墓。",
            },
            
        ],
        num:0,
        img_url:"",
        tit:"",
        con:"",
        flag03:false,//控制图片路径添加
    },
    methods:{
        //增
        add:function(){
            this.flag03=false;
            this.flag=true;
            this.subm="添加";
            this.flag02=true;
            this.img_url="";
            this.tit="";
            this.con="";
        },
        //关闭
        closed:function(){
            this.flag=false;
            this.flag03=false;
            this.img_url="";
            this.tit="";
            this.con="";
        },
        //图片链接
        imgchange:function(e){
            this.img_url = getURL($(e.target)[0].files[0]);
            this.flag03=true
        },

        //删
        del:function(index){
            if(confirm("确定要删除吗？")){
                this.list.splice(index,1);
            }else{
                return false;
            }
        },
        //改
        xg:function(index){
            this.flag03=false;//控制图片添加
            this.subm="修改";
            this.flag=true;
            this.flag02 = false;
            this.index=index;
            this.tit=this.list[index].tit;
            this.con = this.list[index].con;
            console.log(index)
        },
        //加收藏
        heart:function(e){
            if($(e.target).attr("class")=="iconfont icon-shoucang1"){
                $(e.target).attr("class","iconfont icon-shoucang2");
            }else{
                $(e.target).attr("class","iconfont icon-shoucang1")
            }

        },
        //修改和添加按钮
        setsubm:function(){
            var index = this.index;
            if(this.flag02==true){
                this.flag=false;
                if(this.con==""||this.tit==""||this.img_url==""){
                    alert("请完善影评信息");
                    return false;
                }else{
                    var obj={
                        tit:this.tit,
                        con:this.con,
                        myurl:this.img_url,
                    }
                    this.list.push(obj);
                    this.tit="";
                    this.con="";
                    this.img_url="";
                    this.flag=false;
                }
            }else{
                this.falg = false;
                if(this.con==""||this.tit==""||this.img_url==""){
                    alert("请完善修改信息");
                    this.falg = true;
                }else{
                    Vue.set(this.list[index],"tit",this.tit);
                    console.log(this.list[index])
                    Vue.set(this.list[index],"con",this.con);
                    Vue.set(this.list[index],"myurl",this.img_url);
                    this.img_url="";
                    this.flag=false;
                }
            }
        }
    },
})

//头像上传

查找的时候关键字的智能联想部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Btbook - 磁力搜索</title>
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" href="css/search.css">
</head>
<body>   
    <div id="logo_box">
        <img src="img/download.png" height="80" width="354" alt="">
    </div>     
    <div id="demo">
        <input  id="ipn" type="text" placeholder="Search anything you want..." 
        @blur="flag=false" v-model="val" @keyup="input" @keyup.down="down" @keyup.up="up" @keyup.enter="enter">
        <a id="btn" @click="cl" v-bind:href="hre">Search</a>
            <ul id="search_box" v-if="flag">
                <li :class="{con:index==num}" v-for="(x,index) in arr" @mousedown="md(index)">{{x}}</li>
            </ul>
    </div>
<script src="js/search.js"></script>    
</body>
</html>

附search.js代码部分

var demo = new Vue({
    el:"#demo",
    data:{
        flag:false,
        val:"",
        list:["acfun","acdsee","a4纸尺寸","adobe reader","adobe acrobat","adobe","amd","apple","a4","axure","baidu","bt","btchina","beyond","bbs","bbc","blog","bobo组合","bb霜","blog","chrome","csdn","cctv5","coreldraw","csgo","cnki","cf","cctv5在线直播","cdr","chengjinging"],
        arr:[],
        num:0,
        hr:0,
        hre:""
    },
    methods:{
        input:function(){
            this.arr = this.list.filter(function(a){
                if(a.indexOf(this.val)>-1){
                    return true;
                }
            },this);
            this.flag=true;
        },
        down:function(){
            this.num++;
            this.num=this.num>this.arr.length-1?this.arr.length-1:this.num;
        },
        up:function(){
            this.num--
            this.num=this.num<0?0:this.num;
        },
        enter:function(){
            this.hr=(this.hr==0?1:0)
            if(this.hr==1){
                this.val=this.arr[this.num];
                this.flag=false;
                this.arr=[];
                this.num=0
            }else{
                this.flag=false;
                window.location.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+this.val
            }
        },
        md:function(index){
            this.val=this.arr[index];
            console.log(this.arr[index])
            this.flag=false;
            this.arr=[];
            this.num=0
        },
        cl:function(){
            this.hre="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+this.val
        }
    }


})

vue的鬼斧神工。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,711评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,932评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,770评论 0赞 330
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,799评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,697评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,069评论 1赞 276
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,535评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,200评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,353评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,020评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,610评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2赞 341

推荐阅读更多精彩内容