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>
