Vue双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双向绑定</title>
<script src="vue.js"></script>
</head>
<body>
<div id="id01">
<p>{
{msg}}</p>
<!-- v-bind 不可以双向绑定 -->
<input type="text" :value="msg"><br>
<!-- v-model 双向绑定,只能绑定 value 属性 -->
<input type="text" v-model="msg"><br>
<!-- ----------------------------------- -->
<input type="text" v-model="score"><br>
<input type="range" v-model="score" min="0" :max="maxValue">
<br>
<select v-model="maxValue">
<option value="100">100</option>
<option value="1000">1000</option>
<option value="10000">10000</option>
</select>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#id01",
data: {
msg: "Hello 小印",
score: 50,
maxValue: 100
}
})
</script>
一点点笔记,以便以后翻阅。