<!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及文本的绑定功能