vue 多种方式控制style属性

时间:2019-10-06
本文章向大家介绍vue 多种方式控制style属性，主要包括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>

原文地址：https://www.cnblogs.com/tommymarc/p/11627472.html

随机文章
Javascript知识点必读
最近更新