快捷搜索:  汽车  科技

vue双向数据绑定:vue表单的数据双向绑定

vue双向数据绑定:vue表单的数据双向绑定<input v-model="message" /><div id="app"><title></title></head><body>

vue双向数据绑定:vue表单的数据双向绑定(1)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<div id="app">

<input v-model="message" />

<h2> {{message}}</h2>

</div>

<script src="../js/vue.js"></script>

<script type="text/javascript">

const app = new Vue({

el: "#app"

data: {

message: "123"

}

})

</script>

</body>

</html>

vue双向数据绑定:vue表单的数据双向绑定(2)



还有第二种和第三种写法,都没有第一种简单

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<div id="app">

<!-- 第一种实线双向绑定的方法 -->

<!-- <input v-model="message" /> -->

<!-- 第二种实线双向绑定的方法 --><!-- input事件 -->

<!-- <input v-bind:value="message" @input="shuru" /> -->

<!-- 第三种实线双向绑定的方法 -->

<input :value="message" @input="message = $event.target.value" />

<h2> {{message}}</h2>

</div>

<script src="../js/vue.js"></script>

<script type="text/javascript">

const app = new Vue({

el: "#app"

data: {

message: "123"

}

methods:{

shuru(event){

this.message = event.target.value

}

}

})

</script>

</body>

</html>



猜您喜欢: