Vue 的 form的增删改查
2018-07-07 本文已影响0人
嗯哼_3395
就是日常的增删改查这个比较好理解直接全段代码上
<!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的鬼斧神工。
