Vue语法:数据的双向绑定

Vue语法:数据的双向绑定

1.指令v-model

  • 使用v-model可以为输入元素创建数据双向绑定,他会根据元素的类型自动选取正确的方法来更新元素。下面的代码演示了单行文本框、多行文本框、单选按钮,复选框以及下拉选择框做了一个简单的演示。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令v-modeltitle>
head>
<body>
<div id="app">
    <h3>1.单行文本框h3>
    <input type="text" v-model="singleText" style="width: 240px;">
    <p>{{singleText}}p>

    <h3>2.多行文本框h3>
    <textarea v-model="multiText" style="width: 240px;">textarea>
    <p>{{multiText}}p>

    <h3>3.单选框h3>
    
    <input id="ra" type="radio" value="张三" v-model="radioValue">
    <label for="ra">A.张三label>
    <input id="rb" type="radio" value="李四" v-model="radioValue">
    <label for="rb">B.李四label>
    <p>{{radioValue}}p>

    <h3>4.单个复选框h3>
    
    <input id="c" type="checkbox" v-model="toggleValue">
    <label for="c">哒哒哒label>
    <p>{{toggleValue}}p>

    <h3>5.多个复选框h3>
    
    <input id="ca" type="checkbox" value="AAA" v-model="checkedValues">
    <label for="ca">AAAAlabel>
    <input id="cb" type="checkbox" value="BBB" v-model="checkedValues">
    <label for="cb">BBBBlabel>
    <input id="cc" type="checkbox" value="CCC" v-model="checkedValues">
    <label for="cc">CCCClabel>
    <p>{{checkedValues.join(',')}}p>

    <h3>6.单项下拉选择框h3>
    <select v-model="singleSelect">
        
        <option value="zhangsan">张三option>
        <option >李四option>
    select>
    <p>{{singleSelect}}p>

    <h3>7.多项下拉选择框h3>
    <select multiple v-modle="multiSelect">
        
        <option value=1>语文option>
        <option value=2>数学option>
        <option value=3>历史option>
        <option :value="4">地理option>
    select>
    <p>{{multiSelect.join(',')}}p>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
    var app = new Vue({
        el:'#app',
        data(){
            return{
                singleText:'',
                multiText:'',
                radioValue:'',
                toggleValue:false,
                checkedValues:[],
                singleSelect:'zhangsan',
                multiSelect:[1,3]
            }
        },
        methods:{

        }
    });
script>

body>
html>

2.v-model与修饰符

修饰符 可用版本 说明
.lazy 所有 将用户输入的数据赋值于变量的时间有输入时延迟到数据改变时
.number 所有 自动转换用户输入为数值类型
.trim 所有 自动过滤用户输入的首尾的空白字符

下面的代码展示了trim和number的简单用法。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model与修饰符title>
head>
<body>
<div id="app">
    <input type="text" v-model.trim.number="text" @keyup="handleKeyUp">
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
    var app = new Vue({
        el:'#app',
        data:()=>({
           text:''
        }),
        methods:{
            handleKeyUp(event) {
                console.log(this.text,typeof this.text)
            }
        }
    });
script>

body>
html>

3.v-model与自定义组件

在自定义组件中,value属性和input事件尤为重要,value属性用于接收外部传入的值以更新组件内部的状态,input事件由开发者决定在什么事件调用。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model与修饰符title>
head>
<body>
<div id="app">
    
    <custom-screen v-model="text">custom-screen><br>

    <input type="text" v-model.trim.number="text">
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
    Vue.component('custom-screen',{
        //使用value属性接收外部传入的值
        props:['value'],
        methods: {
            handleReset(){
                console.log('重置为\'\'');
                this.$emit('input','');//使用$emit发送input事件,并将目标值作为参数传出
            }
        },
        template:'
\n' + '

输入值为:{{value}}

\n'
+ ' \n' + '
'
}) var app = new Vue({ el:'#app', data:()=>({ text:'' }), methods:{ } });
script> body> html>

小白一枚,如有问题,请多多指教

你可能感兴趣的:(Vue,vue,html,javascript)