版权声明：本文为博主原创学习笔记，如需转载请注明来源。 https://blog.csdn.net/SHU15121856/article/details/85222722
动态绑定CSS样式
这部分涉及官方文档中的Class与Style绑定。
index.html
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style2.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--这个vue-app是根容器-->
<div id="vue-app">
<h3>示例1:默认为红,有这个class时候就变绿</h3>
<h4>在下面的button上每次点击都取反changeColor的布尔值</h4>
<button v-on:click="changeColor=!changeColor">changeColor</button>
<div v-bind:class="{changeColor:changeColor}">
<span>lzh</span>
</div>
<h3>示例2:通过计算属性返回这{两个class名:true/false}</h3>
<h4>在下面的button上每次点击都取反changeLength的布尔值</h4>
<button v-on:click="changeLength=!changeLength">changeLength</button>
<div v-bind:class="twoClasses">
<span>lzh</span>
</div>
</div>
<script src="app6.js"></script>
</body>
</html>
app6.js
// 实例化vue对象
new Vue({
el: "#vue-app",
data: {
changeColor: false,
changeLength: false
},
methods: {},
computed: {
twoClasses: function () {
return {
changeColor: this.changeColor,
changeLength: this.changeLength
}
}
}
});
style2.css
span {
background: red;
display: inline-block;
padding: 10px;
color: #fff;
margin: 10px 0;
}
.changeColor span {
background: green;
}
.changeLength span:after {
content: "length"; /*content用于插入内容,前面after表示将插入在后面*/
margin-left: 10px;
}
运行结果
两个按钮都点击了一下后的结果：
条件渲染和v-show
条件渲染即使用v-if来控制DOM元素的存在与否，在官方文档中这里。
index.html
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style2.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--这个vue-app是根容器-->
<div id="vue-app">
<h4>通过点击下面的button来取反error和success的bool值</h4>
<button v-on:click="error=!error">Toggle Error</button>
<button v-on:click="success=!success">Toggle Success</button>
<hr>
<h4>下面是当error为真时显示第一个404的,当error为假且success为真时显示第二个</h4>
<p v-if="error">网络连接错误:404</p>
<p v-else-if="success">网络连接成功:200</p>
<hr>
<h4>下面是v-show的使用,v-show当里面为true时正常显示,为false时display(但这个DOM还是存在的)</h4>
<p v-show="error">error为真</p>
<p v-show="success">success为真</p>
</div>
<script src="app7.js"></script>
</body>
</html>
app7.js
// 实例化vue对象
new Vue({
el: "#vue-app",
data: {
error: false,
success: false
}
});
运行结果
两个button都点击一次，以将它们都置为true：
再点击一次左边的button，以将error置回false：
