vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定

v-for
vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定_第1张图片
v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="say">nihao {{dj}}</button>
        <!-- 简写的方法   如果即传参数又想获取dom对象 那么就需要$event    dj就是vue中的dj -->
        <button @click="dian('hello', $event, dj)">haha</button>
    </div>   
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new  Vue({
            el:"#app",
            data:{
                dj:"点击"
            },
            methods:{
                say:function(event){
                    //获取当前的vue中的数据
                    alert(this.dj)
                    //获取原生dom对象的数据(如果不传参数的话默认是一个参数是dom)
                    alert(event.target.innerHTML)
                },
                dian:function(value, event, cs){
                    //获取传过来的值
                    alert(value);
                    //cs打印出来就是点击
                    alert(cs);
                    //获取dom对象 event
                    alert(event.target.tagName);
                }
            }
        })

    </script>
</body>
</html>

事件修饰符 + 按键修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>事件修饰符</h1>

        <!-- stop  阻止单击事件继续传播-->
        <div @click="todo">
            <button @click.stop="doing">点击阻止单击事件</button>
        </div>
        <!-- prevent 阻止事件的默认行为 如 a 和 form  -->
        <a href="http://baidu.com" @click.prevent="doing">点击阻止单击事件</a>
        <!-- once 事件只执行一次 -->
        <button @click.once="add_num">增加{{num}}</button>

        <h2>按键修饰符</h2>

        <!-- 响应回车事件 -->
        <input @keyup.enter="huiche"></input>
        <!-- 先按住Ctrl + 再鼠标点击会触发 -->
        <div v-on:click.ctrl="doSomething">Do something</div>
    </div>
    
    

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new  Vue({
            el:"#app",
            data:{
                dj:"点击",
                num:0
            },
            methods:{
                huiche:function(){
                    alert('页面响应了回车事件')
                },
                doSomething:function(){
                    alert('点击了ctrl')
                },
                doing:function(){
                    alert('点击了doing');
                },
                todo:function(){
                    alert('点击了todo');
                },
                add_num:function(){
                    this.num++
                }
            }
        })

    </script>
</body>
</html>

表单数据双向绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="demo">
        <form action="#" @submit.prevent="tjsj">
            姓名(文本)<input type="text" v-model="name">
            <br><br>

            性别(单选按钮)<input name="sex" type="radio" value="1" v-model="sex"/><input name="sex" type="radio" value="0" v-model="sex"/><br><br>

            技能(多选框)<input type="checkbox" name="skills" value="java" v-model="skills">Java开发
            <input type="checkbox" name="skills" value="vue" v-model="skills">Vue.js开发
            <input type="checkbox" name="skills" value="python" v-model="skills">Python开发
            <br><br> 

            城市(下拉框)<select name="citys" v-model="city">
                <option value="bj">北京</option>
                <option value="nj">南京</option>
                <option value="cc">长春</option>
                <option value="jl">吉林</option>
            </select>
            <br><br>

            说明(多行文本)<textarea cols="30" rows="5" v-model="text_content" ></textarea>
            <br><br>

            <button type="submit">提交</button>
        </form>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#demo',
            data:{
                name:'wml',
                sex:'0',
                skills:[
                    'java',
                    'vue'
                ],
                city:'cc',
                text_content:'多行文本'
            },
            methods:{
                tjsj:function(){
                    alert(this.sex)
                }
            }
        })
    </script>
</body>

</html>

vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定_第2张图片
vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定_第3张图片
vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定_第4张图片
vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定_第5张图片
vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定_第6张图片
vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定_第7张图片
vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定_第8张图片
vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定_第9张图片

vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定_第10张图片
vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定_第11张图片
vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定_第12张图片
vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定_第13张图片
vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定_第14张图片

你可能感兴趣的:(vue v-for + v-on + 事件修饰符 + 按键修饰符 + 表单数据双向绑定)