4,双向绑定
1,在表单中使用双向数据绑定
你可以用v-model 指令在表单, , 及下拉框元素上创建双向数据绑定。它负责监听用户的输入事件以更新数据,并对一些极端场景经行处理。
注意:v-model 会忽略所有表单元素的value,checked,selected特性的初始值而总是将Vue 实例的数据作为数据的来源,你应该通过JavaScript在组件的data选项中声明初始值!
1,单行文本
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1,View层,模板-->
<div id="app">
输入的文本:<input type="text" value="hello" v-model="message">{
{message}}
</div>
<!--2,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
//el:元素,绑定
el:"#app",
data:{
message:"java"
}
});
</script>
</body>
</html>
2,多行文本
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1,View层,模板-->
<div id="app">
输入的文本:<textarea v-model="message">
</textarea>{
{message}}
</div>
<!--2,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
//el:元素,绑定
el:"#app",
data:{
message:"java"
}
});
</script>
</body>
</html>
3,单选按钮
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1,View层,模板-->
<div id="app">
<!--单选按钮-->
性别:
<input type="radio" name="sex" value="男" v-model="sexed" >男
<input type="radio" name="sex" value="女" v-model="sexed">女
<br><p>选中了谁: {
{sexed}}</p>
</div>
<!--2,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
//el:元素,绑定
el:"#app",
data:{
sexed:"男"
}
});
</script>
</body>
</html>
4,下拉框
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1,View层,模板-->
<div id="app">
<!--下拉框-->
下拉框
<select v-model="op">
<option value="" disabled>。。。请选择。。。</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
<!--2,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
//el:元素,绑定
el:"#app",
data:{
op:""
}
});
</script>
</body>
</html>
注意:v-model
表达式的初始值未能匹配任何选项,元系将被渲染为“未选中”状态。 在iOS中, 这会使用户无法选择第一个选项,因为这样的情况下,iOS不会触发change
事件。因此,更推荐像上面这样提供一个值为空的禁用选项
5,组件
1,代码实例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1,View层,模板-->
<div id="app">
<!--v-for:循环
v-bind:绑定
item:相当于是实参
zp2:相当于形参
-->
<zp v-for="item in items" v-bind:zp2="item"></zp>
</div>
<!--2,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
//定义一个Vue组件,component
Vue.component("zp",{
props:['zp2'],
//template:模板的意思
template:'<li>{
{zp2}}</li>'
});
var vm=new Vue({
//el:元素,绑定
el:"#app",
data:{
items: ["java","linux","前端"]
}
});
</script>
</body>
</html>