示例小白教程网www.2d5.net 代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双向数据绑定v-model指令（select）</title>
<!--加载本地vue.js的框架-->
<script src="vue2.2.2.min.js"></script>
</head>
<body>
<!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值-->
<div id="app">
<!--select双向绑定到属性xuanzhong，默认会选中该属性值对应的项目-->
<select v-model="xuanzhong" name="shuiguo">
<option value="0">请选择</option>
<option value="p">苹果</option>
<option value="x">香蕉</option>
<option value="l">荔枝</option>
</select>
<!--上面select选项改变的时候，下面的xuanzhong显示的内容也会改变-->
<span>默认: {{ xuanzhong }}</span>
</div>
<script>
//下面是Vue.js的代码块-开始
new Vue({
el: '#app',//app为前面div区块的id的值，通过"#"号绑定
//data区域定义属性的值
data: {
xuanzhong:"x"
//后面没有数据，则这里定义完毕后面不需要跟上逗号"，"
}
}) //Vue.js的代码块-结束
</script>
</body>
</html>效果图小白教程网www.2d5.net 
|
