【Vue.js学习笔记】6：动态绑定CSS样式,条件渲染和v-show

最新推荐文章于 2024-07-04 23:22:42 发布

大桔骑士v

最新推荐文章于 2024-07-04 23:22:42 发布

阅读量1.9k

点赞数 1

分类专栏： Vue.js 文章标签： Vue.js 条件渲染 v-if v-show

本文链接：https://blog.csdn.net/SHU15121856/article/details/85222722

版权

Vue.js 专栏收录该内容

21 篇文章

订阅专栏

动态绑定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：