Vue绑定
梅逸清
一、绑定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引入vue框架-->
<script src="vue/vue.js"></script>
</head>
<body>
<div>
<!-- 1.插值写法 -->
<!-- {{变量}} : 这叫做插值写法， 让此处文本和data里边的变量进行绑定 -->
<h1>{{info}}</h1><!-- 插值这种写法可以不写在标签中 -->
<!-- 2.vue属性绑定(v-text) -->
<!-- v-text的用法必须用在标签内部(让元素的文本内容和变量进行绑定)<将<b>加粗</b>作为普通文字添加到p标签之间> -->
<p v-text="info2"><br/>
<!-- v-text的用法必须用在标签内部(让元素的标签内容和变量进行绑定<将<b>加粗</b>解析为html元素添加在p标签之间>) -->
<p v-html="info2"></p><br/>
<!-- 2.vue属性绑定(v-bing:属性) -->
<input type="text" v-bind:value="msg"/><br/>
<input type="text" :value="msg"/><br/>
<a :href="url"/>百度</a><br/>
<img :src="imgurl"/><br/>
<!-- 3.双向绑定测试(js变量会影响标签属性值，属性值也会影响js变量的值) -->
双向绑定测试:<input type="text" v-model="msg" value="xxx"/><br/>
<!-- 再次测试双向绑定 -->
<input type="radio" v-model="gender" value="男"/>男
<input type="radio" v-model="gender" value="女"/>女
<h2>{{gender}}</h2>
</div>
<br>
<!-- 4.事件绑定 -->
<span>
<input type="button" v-on:click="f()" value="按钮1"/><br>
<input type="button" @click="ff()" value="按钮2"/><br>
{{info}}
</span>
<script type="text/javascript">
let v=new Vue({
el:"div",
data:{
info:"你好info",
info2:"文本练习<b>加粗</b>",
msg:"你好",
url:"http://www.baidu.com",
imgurl:"a.png",
gender:"男"
}
});
let v2=new Vue({
el:"span",
data:{
info:"事件绑定"
},
methods:{
f:function (){
v.info="点击按钮f1了";
},
ff(){
v.info="点击按钮f2了";
}
}
});
</script>
</body>
</html>
二、猜数字练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div>
<input type="text" placeholder="请输入0-100之间的整数" v-model="nu"><br>
<input type="button" value="猜一猜" @click="check()"><br>
<h1>结果：{{info}}</h1>
</div>
<script>
let num=parseInt(Math.random()*100+1);
console.log(num);
var v=new Vue({
el:"div",
data:{
info:"",
nu:""
},
methods:{
check:function (){
console.log(v.nu+"--"+num);
if(v.nu>num){
v.info="你输入数字太大了";
//alert("你输入数字太大");
}else if(v.nu<num) {
v.info="你输入数字太小了";
//alert("你输入的数字太小");
}else {
v.info="是的，就是这个数字";
//alert("是的，就是这个数字");
}
}
}
});
</script>
</body>
</html>三、计算机案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div>
<input type="text" v-model="num1"><br>
<input type="text" v-model="num2"><br>
<!-- <input type="button" value="+" @click="f1(1)"/>-->
<!-- <input type="button" value="-" @click="f1(2)"/>-->
<!-- <input type="button" value="*" @click="f1(3)"/>-->
<!-- <input type="button" value="/" @click="f1(4)"/>-->
<input type="button" value="+" @click="f2('+')"/>
<input type="button" value="-" @click="f2('-')"/>
<input type="button" value="*" @click="f2('*')"/>
<input type="button" value="/" @click="f2('/')"/>
<h1>{{result}}</h1>
</div>
<script>
var v=new Vue({
el:"div",
data:{
num1:"",
num2:"",
result:""
},
methods:{
f1:function (n){
if(n==1){
v.result=parseInt(v.num1)+parseInt(v.num2);
}else if(n==2) {
v.result=v.num1-v.num2;
}else if(n==3){
v.result=v.num1*v.num2;
}else{
v.result=v.num1/v.num2;
}
},
f2 (s){
v.result=eval(v.num1+s+v.num2);
}
}
});
</script>
</body>
</html>
类似资料：