Untitled

<!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">
    <!-- bootstrap的cdn -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!-- Fontawesom 的 CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <!-- google的icon的cdn -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <!-- Vue實例的掛載點 -->
    <div id='app'>
        <select name="" id="" v-model="selected">
            <option  v-for="option in options" :key="option.id" >{{option.emotion}}</option>
        </select>
        <input type="text" v-model="textInputed">
    </div>


    <!-- Vue 的 CDN -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <!-- bootstrap的javascript的cdn -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <!-- Vue實例的程式碼 -->
    <script>
        let dataObserved = {
            textInputed: '',
            selected: ''
        }
        let optionsData = {
            options: [{
                id: 1,
                emotion: "生氣"
            }, {
                id: 2,
                emotion: "開心"
            }, {
                id: 3,
                emotion: "憤怒"
            }, {
                id: 4,
                emotion: "平淡"
            }]
        }

        vm = new Vue({
            el: '#app',
            data: {
                textInputed: '',
                selected: '',
                options: [{
                    id: 1,
                    emotion: "生氣"
                }, {
                    id: 2,
                    emotion: "開心"
                }, {
                    id: 3,
                    emotion: "憤怒"
                }, {
                    id: 4,
                    emotion: "平淡"
                }]
            },

            updated() {

                console.log('textInputed', this.textInputed)
                    // console.log(vm.$data.options.id)
                console.log('selected', this.selected)

            }
        })
    </script>
</body>

</html>