vue基础学习(1.3)：vue的class与style的绑定以及条件渲染

最新推荐文章于 2023-11-25 11:20:16 发布

alwaysonline1204

最新推荐文章于 2023-11-25 11:20:16 发布

阅读量173

点赞数

分类专栏： vue、ajax

本文链接：https://blog.csdn.net/qq_39198749/article/details/104266156

版权

vue、ajax 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1. class与style的强制绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_class与style绑定</title>
    <style>
        .aClass {
            color: red;
        }

        .bClass {
            color: blue;
        }
    </style>
</head>
<body>

<!--
1. 理解
  在应用界面中, 某个(些)元素的样式是变化的
  class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
  xxx是字符串
  xxx是对象
  xxx是数组
3. style绑定
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  其中activeColor/fontSize是data属性
-->

<div id="demo">
    <h2>1. class绑定: :class='xxx'</h2>
    <p :class="a">class绑定测试哈哈哈</p>
    <h2>2. style绑定</h2>
    <p :style="{color:activeColor,fontSize:fontSize+'px'}">:style="{color:activeColor,fontSize:fontSize+'px'}"</p>
    <button @click="update">更新</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#demo",
        data: {
            a: "aClass",
            b: "bClass",
            activeColor: "red",
            fontSize: 40
        },
        methods: {
            update() {
                this.a = this.b;
                this.activeColor = "green";
                this.fontSize = 20;
            }
        }
    })
</script>
</body>
</html>

条件渲染
v-if、v-else、v-show指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="demo">
    <!--v-if/v-else 不会渲染多余的html-->
    <p v-if="ok">成功</p>
    <p v-else>失败</p>
    <!--v-show会渲染html-->
    <p v-show="ok">showTest1</p>
    <p v-show="!ok">showTest2</p>
    <button @click="change">切换</button>
</div>
<script type="text/javascript">
    new Vue({
        el: "#demo",
        data: {
            ok: true
        },
        methods: {
            change() {
                this.ok = !this.ok;
            }
        }
    })
</script>

</body>
</html>

alwaysonline1204

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础学习(1.3)：vue的class与style的绑定以及条件渲染

1. class与style的强制绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>04_class与style绑定</title> <style> .aClass { ...
复制链接

扫一扫

专栏目录