Untitled

<!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-for -->
<div id="app">
    <div>
        <div v-for="n in 4">{{ n }} </div>
    </div>

    <template v-if="flag">
        <h1>hhhhhh1</h1>
        <h2>h2222222</h2>
        <p>rrrrrrrrrr</p>
    </template>

    <template v-for="n in 4">
        <h3>RRRRRR</h3>
        <h4>ddfddg</h4>
    </template>

    <ul id="example-1">
        <li v-for="item in items" :key="item.message">
            {{ item.message }}
        </li>
    </ul>

    <ul id="example-2">
    <li v-for="(item, index) in items">
         {{ index }} - {{ item.message }}
    </li>
    </ul>

    <ul id="example-3">
    <li v-for="(objvalue, index) in myproduct">
         {{ index }} - {{ objvalue }}
    </li>
    </ul>


</div>
</body>
<script type="text/javascript">
    // создаем объект Vue (экземпляр Vue)
    vm = new Vue({
        el: "#app",
        data: {
            items: [
                 { message: 'Foo' , code: 'GG'},
                 { message: 'Bar' , code: 'GG'}
            ],
            myproduct: {name: "product1", price: 10, w: 100},
            products: [],
            type: 'B',
            flag: true,
            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';

            var a1 = this.items.filter(el => el.message === 'Foo');
            console.log(a1);
        }
    })
</script>
</html>