代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<h4>{{ msg }}</h4>
<!-- v-bind 隻能實作資料的單向綁定，從 M 自動綁定到 V， 無法實作資料的雙向綁定 -->
<!-- <input type="text" v-bind:value="msg" style="width:100%;"> -->
<!-- 使用 v-model 指令，可以實作 表單元素和 Model 中資料的雙向資料綁定 -->
<!-- 注意： v-model 隻能運用在 表單元素中 -->
<!-- input(radio, text, address, email....) select checkbox textarea -->
<input type="text" style="width:100%;" v-model="msg">
</div>
<script>
// 建立 Vue 執行個體，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '大家都是好學生，愛敲代碼，愛學習，愛思考'
},
methods: {
}
});
</script>
</body>
</html> 效果如下，改變input 輸入框中的值，會改變視圖，也會改變Model中的資料
電腦案例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">
</div>
<script>
// 建立 Vue 執行個體，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
calc() { // 電腦算數的方法
// 邏輯：
/* switch (this.opt) {
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2)
break;
case '-':
this.result = parseInt(this.n1) - parseInt(this.n2)
break;
case '*':
this.result = parseInt(this.n1) * parseInt(this.n2)
break;
case '/':
this.result = parseInt(this.n1) / parseInt(this.n2)
break;
} */
// 注意：這是投機取巧的方式，正式開發中，盡量少用
var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
this.result = eval（codeStr)
}
}
});
</script>
</body>
</html> ![Java小案例——随機數猜測随機數猜測[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)