标签：har hello his als cdn hand doctype data fun
class样式绑定：<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
<style type="text/css">
.activated{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick" :class="{activated: isActivated}"><h1>hello world</h1></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
isActivated: false
},
methods: {
handleDivClick: function() {
this.isActivated = !this.isActivated
}
}
})
</script>
</body>
</html>数组变量的绑定
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
<style type="text/css">
.activated{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<!-- <div id="app">
<div @click="handleDivClick" :class="{activated: isActivated}"><h1>hello world</h1></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
isActivated: false
},
methods: {
handleDivClick: function() {
this.isActivated = !this.isActivated
}
}
})
</script> -->
<div id="app">
<div @click="handleDivClick" :class="[activated]"><h1>hello world</h1></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
activated: ""
},
methods: {
handleDivClick: function() {
if (this.activated === "activated") {
this.activated = "";
}else {
this.activated = "activated";
}
}
}
})
</script>
</body>
</html>style绑定：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<!-- <div id="app">
<div @click="handleDivClick" :class="{activated: isActivated}"><h1>hello world</h1></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
isActivated: false
},
methods: {
handleDivClick: function() {
this.isActivated = !this.isActivated
}
}
})
</script> -->
<div id="app">
<div :style="styleObj" @click="handleDivClick"><h1>hello world</h1></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
styleObj: {
color: "black"
}
},
methods: {
handleDivClick: function() {
if (this.styleObj.color == "black") {
this.styleObj.color = "red"
}else {
this.styleObj.color = "black"
}
}
}
})
</script>
</body>
</html>style数组绑定：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<!-- <div id="app">
<div @click="handleDivClick" :class="{activated: isActivated}"><h1>hello world</h1></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
isActivated: false
},
methods: {
handleDivClick: function() {
this.isActivated = !this.isActivated
}
}
})
</script> -->
<!-- <div id="app">
<div :style="styleObj" @click="handleDivClick"><h1>hello world</h1></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
styleObj: {
color: "black"
}
},
methods: {
handleDivClick: function() {
if (this.styleObj.color == "black") {
this.styleObj.color = "red"
}else {
this.styleObj.color = "black"
}
}
}
})
</script> -->
<div id="app">
<div :style="[styleObj, {background:‘yellow‘}]" @click="handleDivClick"><h1>hello world</h1></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
styleObj: {
color: "black",
border:"1px solid red"
}
},
methods: {
handleDivClick: function() {
if (this.styleObj.color == "black") {
this.styleObj.color = "red"
}else {
this.styleObj.color = "black"
}
}
}
})
</script>
</body>
</html>标签：har hello his als cdn hand doctype data fun
原文地址：https://blog.51cto.com/5660061/2419021
