vue.js表单数据双向绑定
来源：互联网 发布：linux如何ping ip 编辑：程序博客网 时间：2024/04/28 10:08
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
</head>
<body>
<!-- 表单元素数据绑定 -->
<!-- input数据绑定 -->
<div id="div1">
<input type="text" v-model="message">
<br/>
<!-- checkbox -->
<input type="checkbox" v-model="checked"><span>{{checked}}</span>
<br/>
<!-- radio -->
<input type="radio" name="choice1" value="是" v-model = "choice">
<label for="">是</label>
<br/>
<input type="radio" name="choice1" value="否" v-model = "choice">
<label for="">否</label>
<br/>
<span>{{choice}}</span>
<!-- select -->
<br/>
<select v-model="selected">
<option>男</option>
<option>女</option>
</select>
<span>{{selected}}</span>
<br/>
<select v-model="multiSelect" multiple>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<span>{{multiSelect}}</span>
<pre>data: {{$data | json }}</pre>
</div>
<!-- select option的value和实际value不同时 -->
<div id="div2">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
</select>
<span>selected:{{selected}}</span>
</div>
<script>
var test = new Vue({
el:"#div1",
data:{
message:"hello vue.js",
checked:true,
choice:"",
selected:"男",
multiSelect:""
}
});
var test1 = new Vue({
el:"#div2",
data:{
selected:'a',
options:[
{ text: 'A', value: 'a' },
{ text: 'B', value: 'b' }
]
}
})
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
</head>
<body>
<!-- 表单元素数据绑定 -->
<!-- input数据绑定 -->
<div id="div1">
<input type="text" v-model="message">
<br/>
<!-- checkbox -->
<input type="checkbox" v-model="checked"><span>{{checked}}</span>
<br/>
<!-- radio -->
<input type="radio" name="choice1" value="是" v-model = "choice">
<label for="">是</label>
<br/>
<input type="radio" name="choice1" value="否" v-model = "choice">
<label for="">否</label>
<br/>
<span>{{choice}}</span>
<!-- select -->
<br/>
<select v-model="selected">
<option>男</option>
<option>女</option>
</select>
<span>{{selected}}</span>
<br/>
<select v-model="multiSelect" multiple>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<span>{{multiSelect}}</span>
<pre>data: {{$data | json }}</pre>
</div>
<!-- select option的value和实际value不同时 -->
<div id="div2">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
</select>
<span>selected:{{selected}}</span>
</div>
<script>
var test = new Vue({
el:"#div1",
data:{
message:"hello vue.js",
checked:true,
choice:"",
selected:"男",
multiSelect:""
}
});
var test1 = new Vue({
el:"#div2",
data:{
selected:'a',
options:[
{ text: 'A', value: 'a' },
{ text: 'B', value: 'b' }
]
}
})
</script>
</body>
</html>
2 0
- vue.js表单数据双向绑定
- vue.js双向数据绑定
- vue.js表单的双向绑定
- Vue.js实现双向数据绑定（表单自动赋值、表单自动取值）
- Vue.js学习 Item4 -- 数据双向绑定
- Vue.js双向数据绑定原理
- vue.js双向数据绑定实现原理
- Vue--数据双向绑定
- Vue双向数据绑定
- vue.js双向绑定基础
- 2.vue.js实例：双向数据绑定实例
- vue.js v-model数据双向绑定实例
- [Vue.js启航]——数据的双向绑定
- vue.js基础-处理用户输入与双向数据绑定
- JQuery 类似Vue.js的双向数据绑定器。
- 【VUE】IView.js下拉框数据双向绑定
- vue双向数据绑定原理
- Vue 双向数据绑定原理
- Android之为什么一个线程只有一个Handler,Looper
- Python办公
- Java中文档注释规范思维导图
- 1. Two Sum
- Android自定义View-登录界面
- vue.js表单数据双向绑定
- A Simple Problem with Integers
- 性能之多线程
- 发散思维浅说
- POJ 3280 Cheapest Palindrome(DP)
- 获取一个数二进制序列中所有的偶数位和奇数位，分别输出二进制序列。
- 判断俩个整型数组有无相同的数
- linux - git服务器搭建
- Java SE 基础常用API-字符串基本操作思维导图
