vue.js v-model

v-model可以实现view和model的双向绑定,所以名字v(view)-model(model)

 
<html lang="en" xmlns:v‐on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF‐8">
    <title>vue.js v-modeltitle>
 	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js">script>
head>
<body>
<div id="app">
<input type="text" v‐model="num1">+
<input type="text" v‐model="num2">=
   {{Number.parseInt(num1)+Number.parseInt(num2)}}
div>
body>
<script>
 var VM = new Vue({
        el:"#app",
        data:{
            num1:0,
            num2:0,
        },
    });

script>
html>

单行文本


 

Message is: {{ message }}

多行文本

Multiline message is:

{{ message }}


复选框

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

Checked names: {{ checkedNames }}

单选按钮

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})


Picked: {{ picked }}

选择框

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})
Selected: {{ selected }}

修饰符

.lazy
.number
.trim

参考文献:
https://cn.vuejs.org/v2/guide/forms.html

你可能感兴趣的:(vue,web前端)