• 技术文章 >web前端 >Vue.js

    vue怎么设置样式

    青灯夜游青灯夜游2021-10-27 15:15:45原创114

    方法:1、利用标签的style属性添加行内样式;2、使用“v-bind”指令,通过绑定设置style样式;3、将vue的属性设置为样式,语法“:style="obj"”或“:style="[obj,obj1...]"”。

    本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

    Vue 设置style样式

    1、直接添加行内样式

    2、通过绑定设置style样式

    3、将vue的属性设置为样式(vue属性可以是多个)

    <div id="box">
                <!--直接添加样式-->
                <p style="background-color: blue;">sssss</p>
                <!--绑定样式-->
                <p v-bind:style="'background-color: red;'">sssss</p>
                <!--将vue中的属性作为样式设置-->
                <p :style="obj">sssss</p>
                <!--将多个属性作为样式设置-->
                <p :style="[obj,obj1]">sssss</p>
            </div>
            <script type="text/javascript">
                var vm=new Vue({
                    el:"#box",
                    data:{
                        obj:{
                            backgroundColor:"gold"
                        },
                        obj1:{
                            fontSize: "30px"
                        }
                    },
                });
            </script>

    相关推荐:《vue.js教程

    以上就是vue怎么设置样式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vue 设置样式
    上一篇:vue怎么隐藏元素 下一篇:vuejs怎么实现密码加密
    大前端线上培训班

    相关文章推荐

    • vuejs怎么防止重复请求• vue不是内部或外部命令怎么解决• vue怎么获取dom元素• vue怎么删除数组元素• vuejs怎么插入变量

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网