<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
</head>
<body>
<style>
.box1 {
background-color: green;
width: 300px;
height: 300px;
}
.box2 {
background-color: lawngreen;
width: 200px;
height: 200px;
}
.box3 {
background-color: greenyellow;
width: 100px;
height: 100px;
}
.meta {
background-color: black;
width: 300px;
height: 100px;
color: aqua;
}
.meta2 {
background-color: rgb(129, 129, 129);
width: 300px;
height: 100px;
color: aqua;
}
button {
width: 200px;
height: 20px;
}
.lastbox {
border-radius: 30px;
text-align: center;
}
</style>
<div class="content">
<!-- 事件绑定 -->
<h1>事件绑定</h1>
<div class="box1" v-on:click="onbox1">{{box1}}
<div class="box2" v-on:click="onbox2">{{box2}}
<div class="box3" v-on:click="onbox3">{{box3}}
</div>
</div>
</div>
<!-- class绑定 -->
<h1>class绑定</h1>
<button @click="btn">{{tip}}</button>
<div :class="{meta:m}"></div>
<div :class="['lastbox',mode]">111111</div>
<!-- style绑定 -->
<h1>style绑定</h1>
<div v-bind:style="{backgroundColor:bgcColor,color:txtColor,fontSize:txtFont+'px'}">
{{text}}
</div>
<div :style="[box4,{backgroundColor:'lawngreen',display:d}]"></div>
<h1>条件渲染</h1>
<button @click="change">{{btnchange}}</button>
<div v-if="flag">{{iF}}</div>
<div v-show="flag">{{show}}</div>
<h1>循环渲染</h1>
<div v-for="ele in arr">
<div :style="{width:'20px',height:'20px',borderRadius:'50%',backgroundColor:bC1}">
{{ele.tip}}
</div>
<div :style="{width:'30px',height:'30px',borderRadius:'50%',backgroundColor:bC2}">
{{ele.colorname}}
</div>
<div :style="{width:'50px',height:'50px',borderRadius:'50%',backgroundColor:bC3}">
{{ele.cname}}
</div>
</div>
</div>
<script>
let option = {
el: ".content",
data: {
box1: "box1",
box2: "box2",
box3: "box3",
m: true,
mode: "meta",
flag: true,
tip: "点击",
text: "一段文字",
txtColor: "green",
txtFont: 30,
box4: {
width: "200px",
height: "20px",
},
d: "block",
bgcColor: "green",
btnchange: "点击产生条件渲染效果",
iF: "v-if:删除节点",
show: "v-show:display:none",
arr: [{
tip: "1",
colorname: "green",
cname: "绿色"
},
{
tip: "2",
colorname: "lawngreen",
cname: "荧光绿"
},
{
tip: "3",
colorname: "greenyellow",
cname: "黄绿色"
}],
bC1:"green",
bC2: "lawngreen",
bC3:"greenyellow"
},
methods: {
onbox1() { console.log("box1"); },
onbox2() { console.log("box2"); },
onbox3() { console.log("box3"); },
btn() {
this.flag = !this.flag;
if (this.flag) {
//true
this.mode = "meta";
this.d = "block"
this.bgcColor = "green"
console.log("true");
} else {
this.mode = "meta2";
this.d = "none"
this.bgcColor = "darkgreen"
console.log("false");
}
},
change() {
this.flag = !this.flag;
}
},
}
var vm = new Vue(option)
// console.log(vm, option.data, vm == option.data)
</script>
</body>
</html>
