<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style: none;
}
</style>
</head>
<body>
<div id='div'>
<input type="text" value="" v-model="msg" />
<input type="button" value="https://bbs.csdn.net/topics/發表" @click="add" />
<ul>
<li v-for="(d,i) in arr" :key="i">
<span>第{{i+1}}樓: </span><span :contenteditable="d.edit" @blur='Preservation' >{{d.content}}</span>
<input type="button" value="https://bbs.csdn.net/topics/上移" @click="pgUp(d,i)"/>
<input type="button" value="https://bbs.csdn.net/topics/下移" @click="pgDn(d,i)" />
<input type="button" value="https://bbs.csdn.net/topics/洗掉" @click="del(i)" />
<input type="button" value="https://bbs.csdn.net/topics/編輯" @click="edit(i)" />
</li>
</ul>
</div>
</body>
<script src="https://bbs.csdn.net/topics/vue.js" charset="utf-8"></script>
<script type="text/javascript">
//點擊發表生成另一個li插入ul,li內需要有4個按鈕,上移下移洗掉和編輯;
//第一個span顯示序號,從1開始.第二個span的內容從輸入框獲取.
//點擊上移或者下移按鈕,把按鈕所在的li上移或者下移.
//第一個li無法上移,最后一個li無法下移
//點擊洗掉按鈕洗掉按鈕所在li
//點擊編輯按鈕編輯span的內容.contenteditable是true就可以編輯.
//修改的資料能保存上下移動
// 提示:
// 資料驅動,本題你需要自己構造結構如下的類似陣列.
// arr:[{content:1111,edit:true},{content:222222,edit:false}]
// 通過操作此陣列實作上移下移,方法:arr.splice(下標,洗掉個數)
new Vue({
el:'#div',
data:{
msg:"",
flag:"false",
arr:[],
},
methods:{
add(i){
this.arr.push({
content:this.msg,
edit:this.flag
})
this.msg = ''
},
pgUp(d,i){
this.arr.splice(i - 1, 0, d)
this.arr.splice(i + 1, 1)
},
pgDn(d,i){
this.arr.splice(i + 2, 0, d)
this.arr.splice(i,1)
},
del(i){
this.arr.splice(i, 1)
},
edit(i){
this.arr[i].edit = "true"
},
}
})
</script>
</html>
uj5u.com熱心網友回復：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none;
}
textarea {
outline: 0;
}
</style>
</head>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<body>
<div id='div'>
<input type="text" value="" v-model="msg" />
<input type="button" value="https://bbs.csdn.net/topics/發表" @click="add" />
<ul>
<li v-for="(d, i) in arr" :key="i">
<span>第{{i+1}}樓: </span><br>
<textarea :ref="`t_${i}`" :readonly="d.readonly" v-model="d.content" @blur="d.readonly=true"></textarea><br>
<input type="button" value="https://bbs.csdn.net/topics/上移" v-if="i>0" @click="pgUp(d, i)" />
<input type="button" value="https://bbs.csdn.net/topics/下移" v-if="i<arr.length-1" @click="pgDn(d, i)" />
<input type="button" value="https://bbs.csdn.net/topics/洗掉" @click="del(i)" />
<input type="button" value="https://bbs.csdn.net/topics/編輯" @click="edit(i)" />
</li>
</ul>
</div>
</body>
<script type="text/javascript">
//點擊發表生成另一個li插入ul,li內需要有4個按鈕,上移下移洗掉和編輯;
//第一個span顯示序號,從1開始.第二個span的內容從輸入框獲取.
//點擊上移或者下移按鈕,把按鈕所在的li上移或者下移.
//第一個li無法上移,最后一個li無法下移
//點擊洗掉按鈕洗掉按鈕所在li
//點擊編輯按鈕編輯span的內容.contenteditable是true就可以編輯.
//修改的資料能保存上下移動
// 提示:
// 資料驅動,本題你需要自己構造結構如下的類似陣列.
// arr:[{content:1111,edit:true},{content:222222,edit:false}]
// 通過操作此陣列實作上移下移,方法:arr.splice(下標,洗掉個數)
new Vue({
el: '#div',
data: {
msg: "",
arr: [],
},
methods: {
add(i) {
this.arr.push({
content: this.msg,
readonly: true
})
this.msg = ''
},
pgUp(d, i) {
var temp = this.arr[i-1]
this.$set(this.arr, i-1, d)
this.$set(this.arr, i, temp)
},
pgDn(d, i) {
var temp = this.arr[i+1]
this.$set(this.arr, i+1, d)
this.$set(this.arr, i, temp)
},
del(i) {
this.arr.splice(i, 1)
},
edit(i) {
this.$refs[`t_${i}`][0].focus()
this.arr[i].readonly = false
},
}
})
</script>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/61125.html
標籤：JavaScript
下一篇：我在from標簽里面的action屬性寫了值，可是表單還是被提交到根目錄下的index.html的不存在地址了，求大佬解答