zoukankan      html  css  js  c++  java
  • vue.js的一些事件绑定和表单数据双向绑定

    知识点: 
    v-on:相当于 例如:v-on:click==@click ,menthods事件绑定
    v-on修饰符可以指定键盘事件
    v-model进行表单数据的双向绑定



    <template>

    <p v-for="item in list">{{item.name}} {{item.price}}</p>
    <button v-on:click="addItem">addItem</button> <!--v-on:相当于@-->
    <button @click="addItem">addItem</button>

    <input v-on:keydown.enter="onKeydown"/>    <!--指令的修改器-->
    <componeta @my-event="onComponentEvent"></componeta>

    <!--<input v-model="myValue" type="text"/>{{myValue}} --> <!--v-model文本框的事件绑定,表单的事件绑定---->
    <!--<input v-model.lazy="myValue" type="text"/>{{myValue}}--> <!--v-model.lazy延迟显示-->
    <!-- <input v-model.number="myValue" type="text"/>{{typeof myValue}}--> <!--v-model.number将123(string)转化为123(number)-->
    <input v-model.trim="myValue" type="text"/> {{myValue}} <!--v-model.trim截取字符串前后的空格-->

    <hr>
    <input v-model="myBox" type="checkbox" value="apple"/> <!--v-model多选框的事件绑定-->
    <input v-model="myBox" type="checkbox" value="banna"/>
    <input v-model="myBox" type="checkbox" value="pineapple"/>
    {{myBox}}

    <input v-model="myBox1" type="radio" value="apple"/> <!--v-model单选框的事件绑定-->
    <input v-model="myBox1" type="radio" value="banna"/>
    <input v-model="myBox1" type="radio" value="pineapple"/>
    {{myBox1}}

    <!--v-model下拉框的事件绑定-->
    <!--版本一-->
    <!-- <select v-model="selection">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    {{selection}}-->

    <select v-model="selection"> <!--版本二-->
    <option v-for="item in selectOption" v-bind:value="item.value">{{item.text}}</option>

    </select>
    {{selection}}

    </div>
    </template>

    <!--<script>
    export default {
    name: 'app'
    }
    </script>-->
    <!--导入组件-->
    <script>
    /* eslint-disable */
    import Vue from 'vue'
    import Hello from './components/Hello'
    import componeta from './components/a.vue'

    export default {
    /* name: 'app',
    components: {
    Hello
    },*/
    components:{
    componeta
    },
    data(){
    return{
    myValue:'',
    myBox:[],
    myBox1:[],
  • 相关阅读:
    学习网站
    支付宝调用错误:Call to undefined function openssl_sign()
    打包APP
    PHP 转义
    tp5学习
    js函数
    php学习随笔--定时触发
    day07
    60.函数应用:学生管理系统
    59.列表推导式
  • 原文地址:https://www.cnblogs.com/shuaifing/p/7903780.html
Copyright © 2011-2022 走看看