<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/vue.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.8.0/css/layui.css" />
<title></title>
<style>
img {
width: 20rem;
}
#app {
padding: 0 1rem;
text-align: center;
width: 20rem;
height: 400px;
border: 1px solid #000;
margin: 2rem auto;
}
.kuang {
height: 1.52rem;
width: 16rem;
}
button {
display: inline-block;
padding: .2rem;
}
ul {
text-align: left;
margin: 1rem;
}
.right {
float: right;
}
.all {
display: flex;
justify-content: center;
justify-content: space-around;
}
.orange {
color: orange;
}
</style>
</head>
<body>
<div id="app" @click="alls()">
<h1>待辦事項</h1>
<input type="text" class="kuang" v-model="plusone" @keydown.enter="plus">
<button @click="plus">添加</button>
<ul>
<li v-for="(item,index) in sports" :key="item.name">
<input type="checkbox" :value="item.name" v-model="plusdai" class="left">
<span @click.stop="chang(index)" v-show="!item.zhuangtai">{{item.name}}</span>
<input type="text" v-model="item.name" v-show="item.zhuangtai
" @click.stop>
<span class="right" @click="del(index)">X</span>
</li>
</ul>
<hr>
<div class="all">
<span class="orange">
<input type="checkbox" class="left" :checked="plusdai.length==sports.length && sports.length"
@click="selall($event)">全選</span>
<span>共{{sports.length}}項，選中{{plusdai.length}}項</span>
<span class="orange" @click="delallp">批量刪除</span>
</div>
</div>
<script>
vm = new Vue({
el: "#app",
data: {
plusone: "",
sports: [{
name: "喫飯",
zhuangtai: false
}, {
name: "睡覺",
zhuangtai: false
}, {
name: "睡覺s",
zhuangtai: false
}],
plusdai: []
},
methods: {
// 添加內容函數
plus() {
if (!this.plusone.length) {
alert("沒內容")
return;
}
this.sports.push({
name: this.plusone,
zhuangtai: false
});
this.plusone = '';
},
// 修改編輯狀態
chang(i) {
console.log(this.sports[i].zhuangtai = !this.sports[i].zhuangtai)
},
// 鼠標在外部點擊事件
alls() {
this.sports.forEach(item => {
item.zhuangtai = false
})
},
// 批量刪除選中的數據
del(i) {
if (this.plusdai.includes(this.sports[i].name)) {
this.plusdai.splice(i, 1);
}
this.sports.splice(i, 1);
},
// 全選或者非全選
selall(i) {
const sall = [];
this.sports.forEach(item => {
sall.push(item.name)
})
this.plusdai = i.target.checked ? sall : [];
console.log()
},
// 刪除選中的數據
delallp() {
// 刪除掉對象中選中的數據
this.sports = this.sports.filter(obj => {
for (let key in obj) {
if (typeof obj[key] === 'string') {
if (this.plusdai.includes(obj[key])) {
return false;
}
}
}
return true;
});
this.plusdai = []
console.log(this.sports);
}
},
computed: {
all() {
}
},
watch: {
}
})
vm.change = "王二麻";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/vue.js"></script>
<title></title>
<style>
* {
padding:0;margin:0 padding:0.5rem
}
button{
background:blue;color:white;padding: 0.5 0.9rem;display:inline-block;
}
ul{border:1px solid blue;width:11rem;margin-top:0rem;border-top:none;
border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;
}
</style>
</head>
<body>
<div id="app">
<input type="" name="" id="" v-model="inputValue" @blur="ons=false" @focus="ons=result.length" />
<button type="button">baidu</button>
<ul v-show="ons">
<li v-for="(item,index) in result">{{item.q}}</li>
</ul>
</div >
<script>
vm= new Vue({
el:"#app",
data: {
inputValue:'',
result:[],
ons:false
},
methods: {
},
computed:{
},
watch:{
inputValue(){
$.ajax({
url: "http://www.baidu.com/sugrec", //請求的url地址
dataType: "JSONP", //返回格式爲json
async: false, //請求是否異步，默認爲異步，這也是ajax重要特性
data: {
prod:"pc",
wd :vm.inputValue
}, //參數值
success: function(msg) {
console.log(msg.g)
vm.result=msg.g||[]
vm.ons=vm.result.length
},
});
}
}
})
// vm.change="王二麻";
</script>
</body>
</html>