<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p :style="{color:fontColor,backgroundColor:bg}">hello world</p>
    <p :style="{color:fontColor,'background-color':bg}">hello world</p>
    <p :style="style1">hello world</p>
    <p :style="[style2,style3]">hello world</p>
</div>

<script>
    var vm = new Vue({
       el: "#app",
       data:{
           fontColor: "red",
           bg: "yellow",
           style1: {color:"red",'background-color':"pink"},
           style2: {
               color: "red",
               background: "yellow",
           },
           style3:{
               border: "3px solid blue",
           }
       },
    });

</script>
</body>
</html>