3 Class 与 Style 绑定

最新推荐文章于 2024-03-17 12:22:11 发布

zlk_blogs

最新推荐文章于 2024-03-17 12:22:11 发布

阅读量139

点赞数

分类专栏： Vue 前端框架文章标签： vue class与style

Vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端框架

7 篇文章 0 订阅

订阅专栏

样式的切换与内联样式的使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Class与Style绑定</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
        <style>
            .active{
                color: green;
            }
            .error{
                color:red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--isActive为true，显示active对应的class样式,属于简写的特殊形式,一般比较少用-->
            <p v-bind:class="{active:isActive}">seen为true可见。</p>

            <!--支持三目运算,不能加大括号-->
            <p v-bind:class="isActive?active:error">seen为true可见。</p>

            <!--支持数组，会被最后一个样式覆盖-->
            <p v-bind:class="item">seen为true可见。</p>

            <!--内联样式-->
            <p v-bind:style="activeColor">seen为true可见。</p>

        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                isActive:true,
                active:'active',
                error:'error',
                item:['active','error'],
                activeColor: {
                    color:'red',
                    //必须驼峰命名
                    fontSize: '30px'
                }
            }
        })
    </script>

</html>

注：v-bind可以省略。vue里面定义的元素需要出现在data中才会生效。

参考

官网地址： https://cn.vuejs.org/

Ant Design of Vue地址：  https://vue.ant.design/docs/vue/introduce-cn/

zlk_blogs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3 Class 与 Style 绑定

样式的切换与内联样式的使用。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Class与Style绑定</title> <script src="https://cdn.jsde...
复制链接

扫一扫