JS对象迭代、事件处理器、表单控件绑定、表单复选框、表单单选按钮

JS对象迭代

知识点

• v-for

v-for

循环JS对象，把对象内容循环显示到页面上。

<div id="myApp">
    <h1>JS对象迭代</h1>
    <div v-for="(value, key) in mygame">
        {{ key }} : {{ value }}
    </div>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp', 
        data: {
            mygame: {
                title: "乌贼娘2代",
                price: 350,
                pubdate: "2017年夏季",
                category: "射击",
                agerange: "全年龄",
            },
        },
    });
</script>

显示
事件处理器

知识点

• v-on:(event)/@(event)

v-on:(event)

页面元素的事件绑定。（click,keyup,load等等）

<div id="myApp">
    <h1>事件处理器</h1>
    <input id="txtName" v-on:keyup="txtKeyup($event)">
    <button id="btnOK" v-on:click="btnClick($event)">OK</button>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp', 
        data: {},
        methods: {
            txtKeyup: function(event){
                this.debugLog(event);
            },
            btnClick: function(event){
                this.debugLog(event);
            },
            debugLog:function(event){
                console.log(
                    event.srcElement.tagName, 
                    event.srcElement.id, 
                    event.srcElement.innerHTML, 
                    event.key?event.key:""
                );
            },
        },
    });
</script>

表单控件绑定

知识点

• v-model
• input[type=“text”]

v-model

为表单控件元素创建双向数据绑定。（将JS变量的值“快速”设定到控件上，然后将用户输入的内容“快速”设置回JS变量）

<div id="myApp">
    <h1>表单控件绑定</h1>
    <input type="text" v-model="message" placeholder="来呀，编辑我吧！">
    <p>Message is: {{ message }}</p>
    <textarea v-model="message" placeholder="加入多行编辑" rows="8" cols="34"></textarea>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp', 
        data: {
            message: "我爱马里奥",
        },
        methods: {
        },
    });
</script>

表单复选框

知识点

• v-model
• input[type=“checkbox”]

表单复选框绑定

<div id="myApp">
    <h1>表单复选框</h1>
    <input type="checkbox" id="生化危机7" value="生化危机7" v-model="checkedGames">
    <label for="生化危机7">生化危机7</label>
    <input type="checkbox" id="模拟飞行" value="模拟飞行" v-model="checkedGames">
    <label for="模拟飞行">模拟飞行</label>
    <input type="checkbox" id="塞尔达传说" value="塞尔达传说" v-model="checkedGames">
    <label for="塞尔达传说">塞尔达传说</label>
    <br>
    <p>您选择的游戏是: {{ checkedGames }}</p>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp', 
        data: {
            checkedGames: []
        },
        methods: {
        },
    });
</script>

显示：

表单单选按钮

知识点

• v-model
• input[type=“radio”]

表单单选按钮绑定

<div id="myApp">
    <h1>表单单选按钮</h1>

    <h3>选择性别</h3>
    <input type="radio" id="male" value="男" v-model="pickedSex">
    <label for="male">男</label>
    <br>
    <input type="radio" id="female" value="女" v-model="pickedSex">
    <label for="female">女</label>

    <h3>选择爱好</h3>
    <input type="radio" id="game" value="玩游戏" v-model="pickedHobby">
    <label for="game">玩游戏</label>
    <br>
    <input type="radio" id="movie" value="看电影" v-model="pickedHobby">
    <label for="movie">看电影</label>

    <h3>选择结果</h3>
    <p>性别: {{ pickedSex }}</p>
    <p>爱好: {{ pickedHobby }}</p>

</div>
<script>
    var myApp = new Vue({
        el: '#myApp', 
        data: {
            pickedSex: "",
            pickedHobby: "",
        },
        methods: {
        },
    });
</script>

显示：