Vue学习--事件绑定 && 双向绑定

事件绑定

    <div id="app">
        <button v-on:click="sayHi">Leon</button>
        <button v-on:click="yelling">Jesson PinkMan</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm  = new Vue({
            el: "#app",
            data: {
                yell: "yo Mr white",
                message: "Would you want to dance with me?",
            },
            methods: { //方法必须定义在Vue 的methods 对象中
                sayHi: function () {
                    alert(this.message)
                },
                yelling: function () {
                    alert(this.yell)
                }
            }
        });
    </script>

---

双向绑定

输入框：

    <h2>双向绑定</h2>
    <div id="app">
        <p>{{message}}</p>
        输入的文本： <input type="text" v-model="message"/>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm  = new Vue({
            el: "#app",
            data: {
                message: ""
            }
        });
    </script>

 

单选按钮：

    <div id="vSex">
        <h3>单选框</h3>
        <p>性别：</p>
        <input type="radio" name="sex" value="男" v-model="sex">男
        <input type="radio" name="sex" value="女" v-model="sex">女
        <p>选中了:{{sex}}</p>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm  = new Vue({
            el: "#app",
            data: {
                message: "",
            }
        });
        var vsex = new Vue({
           el: "#vSex",
            data: {
               sex: ""
            }
        });
    </script>

 

下拉列表

    <div id="vSelect">
        <h3>下拉列表</h3>
        <select v-model="message">
            <option value="" disabled>---请选择---</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <p>选中了:{{message}}</p>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vselect = new Vue({
            el: "#vSelect",
            data: {
                message: ""
            }
        })
    </script>