<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.redclass {
background-color: red;
} .blueclass {
color: blue
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</head> <body>
<div id="app">
<p>{{ message }}</p>
<p> {{ reversedMessage }} </p>
</div>
<div id="raw">
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive:
<span v-html="rawHtml"></span>
</p>
</div>
<div id="cs">
<p :class="[classA,classB]">HelloWorld</p>
<p :class="{'redclass':ISA,'blueclass':ISB}">HelloWorld</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello World!'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('');
}
},
methods: {
methodMessage: function () {
return this.message.split('').reverse().join('');
}
}
}); new Vue({
el: '#raw',
data: {
rawHtml: '<span style="color:red"> This should be red.</span>'
}
});
new Vue({
el: '#cs',
data: {
classA: 'redclass',
classB: 'blueclass',
ISA: false,
ISB: true
}
});
</script> </body> </html>
基本功能就是实现Vue的一个class及文本的绑定功能