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>
- </head>
- <body>
- <!-- элемент div c идентификатором app -->
- <!-- v-if -->
- <!-- v-show -->
- <div id="app">
- <div v-if="flag">
- TEXT sadfasfasfsaf
- </div>
- <div v-else>
- TEXT - выводится если значение флага = false
- </div>
- <div v-show="canShow()">
- SOME TEXT
- </div>
- <div v-if="num===1">
- Значение num равно 1
- </div>
- <div v-if="type === 'A'">
- A
- </div>
- <div v-else-if="type === 'B'">
- B
- </div>
- <div v-else-if="type === 'C'">
- C
- </div>
- <div v-else>
- Не A/B/C
- </div>
- </div>
- </body>
- <script type="text/javascript">
- // создаем объект Vue (экземпляр Vue)
- vm = new Vue({
- el: "#app",
- data: {
- type: 'B',
- flag: false,
- num: 1,
- name: "HELLO VUE",
- name2: "<b>HELLO VUE2</b>",
- age: 25,
- message: '',
- checked: true,
- picked: 'first',
- language: "Java",
- product: {
- name: '',
- price: 0
- //Наименование
- // Цена
- },
- useraccount:{
- // Имя
- // Фамилия
- // Возраст
- name: '',
- surname: '',
- age: 0
- }
- },
- methods: {
- canShow: function(){
- return false;
- },
- test: function(event){
- console.log('test invoked!!!')
- // используем this для того чтобы обратиться к определенному св-ву по имени
- this.name = 'NEW NAME';
- this.age = 20;
- }
- },
- created: function() {
- this.product.name = 'TEST77777777777';
- }
- })
- </script>
- </html>
Add Comment
Please, Sign In to add comment