vue-cli 双向绑定 v-model, 样式绑定 v-bin

index.vue

//template
<div class='page-content'>
    <!-- 双向绑定 -->
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <div v-bind:class="styleObj">{{fullName}}</div>
    <button @click="submitfullName()">提交</button>
    <ul id="names"></ul>
 </div>
//script
<script>
    export default {
        data () {
            return {
                content: "this is content",
                firstName: "",
                lastName: "",
                styleObj: "title-fullName"
            }
        },
        computed: {
            fullName () {
                return this.firstName + this.lastName
            }
        },
        methods: {
            submitfullName () {
                console.log(this.fullName)
                $("#names").append("<li>"+ this.fullName +"</li>")
            }
        }
    }
</script>
//style
<style scoped lang="scss">
  .title-fullName {
    color: red;
    font-size: 40px;
    text-align: center;
  }
.fontSizeNum {
    font-size: 60px;
  }
</style>

v-bind绑定样式

//单个class样式，可以使用v-bind:class=""
<div v-bind:class="styleObj">{{fullName}}</div>
//多个class样式，可以使用v-bind:style="[]"，使用数组
<div v-bind:class="[styleObj,fontSizeNum]">{{fullName}}</div>