<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>姓名:{{cat.name}}</p>
<p>年龄:{{cat.age}}</p>
<p>描述:{{cat.desc}}</p>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
cat: {
name: '罗小黑',
age: 8,
desc: '是一只黑色的猫'
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model:value="a">
<select v-model="fn">
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="text" v-model:value="b">
<button @click="ys">运算</button>
<input type="text" v-model:bind="c">
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
a:'',
b:'',
c:'',
fn:'',
},
methods:{
ys(){
if(this.fn=='+')
{
this.c=(this.a-0)+(this.b-0)
}
else if(this.fn=='-')
{
this.c=(this.a-0)-(this.b-0)
}
else if(this.fn=='*')
{
this.c=(this.a-0)*(this.b-0)
}
else
{
this.c=(this.a-0)/(this.b-0)
}
}
}
})
</script>
</body>
</html>