1.操作內聯樣式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style type="text/css">
.content {
display: flex;
/* 主軸方向 */
flex-direction: row;
}
</style>
</head>
<body>
<div id="app">
<div class="content">
<div v-bind:style="styleObject" @click="getData()">zhh</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
styleObject: {
width:'100px',
height: '100px',
color: 'red',
fontSize: '13px',
backgroundColor: '#00FFFF'
}
},
methods: {
getData() {
this.styleObject.backgroundColor='#000000';
}
}
})
</script>
</body>
</html>
2、操作多選框是否選中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<label>
<!-- 操作是否選中 -->
<label v-for="(item, index) in items">
<input type="checkbox" v-model="item.checked" @change="getData(item, index)">{{item.message}}
</label>
</label>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [
{message: '劉備',checked: true},
{message: '關羽',checked: false},
{message: '張飛',checked: false},
]
},
methods: {
getData(item, index) {
console.log(item.checked+">>>"+index);
}
}
})
</script>
</body>
</html>
3列表添加刪除條目：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<!-- 引入vue的庫 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--v-model把把輸入框中的數據綁定到icontent變量-->
<input type="text" v-model="icontent">
<button @click="add()">+增加</button>
<hr />
<ul>
<li v-for="(item,index) in list">
{{item}}----<button @click="idelete(index)">刪除</button>
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
list: ['劉備', '關羽', '張飛'],
icontent: ''
},
methods: {
// 添加數據
add: function() {
if(this.icontent){
this.list=[...this.list,this.icontent];
}else{
alert('請寫入內容');
}
},
// 刪除數據
idelete: function(index) {
this.list.splice(index, 1); // this is how to remove an item
}
},
// 生命週期的函數
mounted: function () {
console.log('模板編譯mounted');
},
})
</script>
</body>
</html>
4多選框的選中，添加，修改，刪除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入vue的庫 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
.buttonLayout {
width: 100%;
height: 30px;
left: 0px;
top: 0px;
/* background-color: seagreen; */
position: relative;
}
.button {
width: 50px;
line-height: 30px;
position: absolute;
top: 10px;
right: 10px;
background-color: yellow;
text-align: center;
border: black 1px solid;
border-radius: 5px;
}
.line {
width: 100%;
height: 1px;
background-color: red;
margin-top: 20px;
margin-bottom: 20px;
}
.cContent {
height: 61px;
background-color: aqua;
}
.cContentItem {
float: left;
margin: 10px;
padding: 10px;
background-color: yellowgreen;
border: black 1px solid;
border-radius: 5px;
}
.cFooterItem {
width: 100%;
height: 50px;
position: relative;
background-color: #FFFFCC;
border-bottom: #000000 1px solid;
}
.cFooterContent {
position: absolute;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
top: 50%;
margin-top: -15px;
left: 10px;
background-color: #00FFFF;
}
.cDelete {
position: absolute;
top: 50%;
margin-top: -10.5px;
right: 10px;
}
/* 僞類，鼠標移動上來時，顯示紅色 */
.cDelete:hover {
color: #FF0000;
}
.cBianJi {
position: absolute;
top: 50%;
margin-top: -10.5px;
right: 80px;
}
/* 僞類，鼠標移動上來時，顯示紅色 */
.cBianJi:hover {
color: #FF0000;
}
.addclass {
float: left;
margin: 10px;
padding: 10px;
background-color: yellow;
border: black 1px solid;
border-radius: 5px;
}
</style>
</head>
<body>
<!-- 裏面放入新的選項 -->
<div id="app">
<div id="content" class="cContent">
<div v-for="(item,index) in list" class="cContentItem" :class="[item.check ? 'addclass' : '']" @click="addClick(item,index)">
{{item.name}}
</div>
</div>
<div class="buttonLayout">
<div class="button" @click="select">選擇</div>
</div>
<div class="line"></div>
<div>
<div v-for="(item,index) in footerList" class="cFooterItem">
<span class="cFooterContent">{{item.name}}</span>
<span class="cDelete" @click="addDElete(item,index)">刪除</span>
<span class="cBianJi" @click="addEdit(item,index)">編輯</span>
<div style="clear: both;"></div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
// 裏面處理數據
data: {
message1: '默認數據',
list: [{
name: '劉備',
check: false
}, {
name: '關羽',
check: false
}, {
name: '張飛',
check: false
}, {
name: '趙雲',
check: false
}, {
name: '馬超',
check: false
}, ],
selectList: [],
footerList: [],
},
// 裏面寫方法
methods: {
// 選擇按鈕添加點擊事件
select: function() {
this.footerList = this.selectList;
// list 把數組裏面選中的過濾掉
this.list = this.list.filter(function(element) {
return !element.check;
})
},
// 列表
addClick: function(item, index) {
// 取反，如果是true改成false,如果是false改成true
item.check = !item.check;
// 查看是否有這個元素，如果有則刪除
if (this.selectList.includes(item)) {
// 過濾
this.selectList = this.selectList.filter(function(element) {
return element != item;
});
} else {
// 添加元素
this.selectList = [...this.selectList, item];
}
},
addDElete: function(item, index) {
console.log('刪除的點擊事件' + index);
this.footerList.splice(index, 1);
},
addEdit: function(item, index) {
console.log('編輯的點擊事件' + index);
// 拿到輸入的內容
let content = window.prompt('修改內容');
if (!content) {
return;
}
let arrayEle = this.footerList[index];
// 改變數組的長度 iArray.length = 12;，vue監視不到改變
// 通過下標修改數組的下標修改數組中的元素，vue監視不到改變
this.footerList = this.footerList.map(function(element) {
if (element == arrayEle) {
element.name = content;
}
return element;
});
}
},
// 生命週期的函數
mounted() {
console.log('模板編譯完成4----mounted');
},
});
</script>
</body>
5自己寫的單選框樣式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入vue的庫 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
.buttonLayout {
width: 100%;
height: 30px;
left: 0px;
top: 0px;
/* background-color: seagreen; */
position: relative;
}
.button {
width: 50px;
line-height: 30px;
position: absolute;
top: 10px;
right: 10px;
background-color: yellow;
text-align: center;
border: black 1px solid;
border-radius: 5px;
}
.line {
width: 100%;
height: 1px;
background-color: red;
margin-top: 20px;
margin-bottom: 20px;
}
.cContent {
height: 61px;
background-color: aqua;
}
.cContentItem {
float: left;
margin: 10px;
padding: 10px;
background-color: yellowgreen;
border: black 1px solid;
border-radius: 5px;
}
.addclass {
float: left;
margin: 10px;
padding: 10px;
background-color: yellow;
border: black 1px solid;
border-radius: 5px;
}
</style>
</head>
<body>
<!-- 裏面放入新的選項 -->
<div id="app">
<div id="content" class="cContent">
<div v-for="(item,index) in list" class="cContentItem" :class="[index==checkIndex ? 'addclass' : '']" v-on:click="addClick(item,index)">{{item}}</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
// 裏面處理數據
data: {
message1: '默認數據',
list:['關羽','張飛','趙雲','黃忠','馬超'],
// 記錄選中的下標，默認不選中
checkIndex:-1,
},
// 裏面寫方法
methods: {
// 列表
addClick: function(item, index) {
// 點擊後，記住點擊的下標，在渲染時判斷
// 在渲染的時候 checkIndex 不用 this.checkIndex
this.checkIndex = index;
}
},
// 生命週期函數，處理數據的綁定
mouted: {
}
});
</script>
</body>
6循環修改內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.content {
width: 100%;
height: 100px;
background-color: #FFFF00;
}
.content .item {
width: 60px;
line-height: 30px;
text-align: center;
float: left;
background-color: #00FFFF;
margin: 10px;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="content">
<div class="item" v-for="(item, index) in iArray" @click="upData(index)">
{{item}}
</div>
</div>
</div>
<!-- 修改數據 -->
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
parentMessage: 'Parent',
iArray: ['關羽', '張飛', '趙雲', '馬超', '黃忠']
},
methods: {
upData: function(index) {
// 拿到輸入的內容
let content = window.prompt('修改內容');
let arrayEle = this.iArray[index];
// 改變數組的長度 iArray.length = 12;，vue監視不到改變
// 通過下標修改數組的下標修改數組中的元素，vue監視不到改變
this.iArray=this.iArray.map(function(element) {
if (element==arrayEle) {
element = content;
}
return element;
});
}
}
})
</script>
</body>
</html>
源碼下載：
上面的代碼複製即可運行，無需源碼