Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Hello Vue</title>
- <meta charset="utf-8">
- <!-- https://unpkg.com/vue@2.6.11/dist/vue.min.js -->
- <!-- подключение фреймворка vue.js -->
- <script type="text/javascript" src="https://unpkg.com/vue"></script>
- <style type="text/css">
- .active {
- color: red
- }
- .some {
- font-size: 24px;
- }
- </style>
- </head>
- <body>
- <!-- элемент div c идентификатором app -->
- <!-- v-for -->
- <div id="app">
- <input type="number" v-model="price" />
- <br>
- ORIGINAL:
- {{message}}
- <br>
- {{ message | capitalize | addWord}}
- <br>
- ORIGINAL: {{price}}
- <br>
- {{price | toFixed(3) }}
- <br>
- </div>
- </body>
- <script type="text/javascript">
- // создаем объект Vue (экземпляр Vue)
- new Vue({
- el: "#app",
- data: {
- result: '',
- price: 10.0777,
- bonus2: 2,
- message: 'some message',
- products: [
- {name: "Product1", price: 100},
- {name: "Product2", price: 200}
- ]
- },
- methods : {
- buttonclicked : function() {
- console.log('buttonclicked');
- },
- clickme : function(param){
- console.log('clickme=' + param);
- },
- changebgcolor : function() {
- this.styleobj.backgroundColor = "green";
- },
- originalcolor : function() {
- this.styleobj.backgroundColor = "red";
- }
- },
- filters: {
- capitalize: function (value) {
- if (!value) return ''
- value = value.toString()
- return value.charAt(0).toUpperCase() + value.slice(1)
- },
- addWord: function (value) {
- value = value.toString()
- return value + ' HELLO!';
- },
- toFixed: function(value, limit) {
- return value.toFixed(limit);
- }
- }
- })
- </script>
- </html>
Add Comment
Please, Sign In to add comment