vue 多种方式控制style属性

Posted tommymarc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 多种方式控制style属性相关的知识，希望对你有一定的参考价值。

一共用到了两种方式:

第一种:对象

第二种:数组

看代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js 多种方式控制class属性 </title>
    <script src="vue.js"></script>
    <script src="node_modules/axios/dist/axios.js"></script>
    <script src="node_modules/lodash/lodash.js"></script>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的标签-->
    <h1 :style="{color:red,fontSize:size+‘px‘}">简单记录</h1>
    <input type="text" v-model="size">
    <h1 :style="style">简单记录</h1>
    <h1 :style="[mykeji]">简单记录</h1>
</div>
<script>
    var app = new Vue({ //实例化vue
        el:‘#ask‘,//vue控制id为ask的元素,
        data:{
            red:‘green‘,
            size:16,
            style:{
                color:‘blue‘,
                fontSize:‘200px‘
            },
            mykeji:{
                color:‘red‘,
                fontSize:‘100px‘
            }
        },

    });
</script>
</body>
</html>

 

以上是关于vue 多种方式控制style属性的主要内容，如果未能解决你的问题，请参考以下文章

vue —— VSCode代码片段

CSS选择器

Vue学习计划(基础三)-class与style绑定,条件渲染和列表渲染

Vue语法基础三（样式绑定）

vue（绑定style属性）

vue style 的scoped 使用