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-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>