2019-06-30

l利用vue.做姓名变化

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div v-html="msg1" v-bind:id="id"></div>
<div>
姓{{'陈'}},明{{'兴'}} , 姓名{{s}}
</div>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data () {
return {
msg1: '<span style="color: #f00;">学习 </span>',
id: 'txt',
number: 1,
seen: true,
isShow: true,
firstName: '陈',
lastname: '兴'
}
},
computed: {
s: function () {
return this.firstName + this.lastname
}
}
}
</script>

<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>