1.vue綁定函數

<head>
<meta charset="UTF-8">
<title>vue01.js</title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div cl" />

国产精品一区电影_国产男女无遮挡猛进猛出_日本丰满熟妇videossex8k_中文字幕无码乱人伦,久久综合伊人77777麻豆,亚洲最大在线观看,无码人妻久久一区二区三区app

武漢互贏網絡科技股份有限公司

為企業創品牌·從營銷型網站建設開始·互贏懂技術·更懂品牌營銷

24小時熱線

159 7210 9576027-89992189

您的位置:首頁 > 新聞資訊 > 行業百科 > 行業動態

vue入門

作者：龍 時間：2018-07-13 瀏覽：

1.vue綁定函數
 
<head>
	<meta charset="UTF-8">
	<title>vue01.js</title>
	<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
	<div class="box" id="box">
		{{ww(scale)}}
		<p v-bind:style = fontS>hello world</p>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#box",
			data:{
				scale:60,
				fontS:"font-size:25px;color:red"
			},
			methods:{
				ww:function(scale){
					if(isNaN(scale)){
						return "數據錯誤"
					};

					if(scale>=90 && scale<=100){
						return "優秀"
					}else if(scale>=75 && scale <90){
						return "良"
					}else if(scale>=60&& scale <75){
						return "及格"
					}else if(scale>=0 && scale <60){
						return "不及格"
					}else{
						return "錯誤了"
					}
				}
			}
		})
	</script>
</body>
2.vue綁定事件
 
<div id="box" class="box">
		<input type="button" v-bind:value="a" @click="click"> 	
	</div>
	
	<script type="text/javascript">
		var vm= new Vue({
			el:".box",
			data:{
				a:1
			},
			methods:{
				click:function(){
					this.a++
				}
			}
		})
	</script>
3.vue綁定屬性
 
<div id="box" class="box">
		<p v-bind:style="{'color':colors[a],'fontSize':fons[a]}">hello world</p>
		<input type="button" v-bind:value="a+1" @click="click"> 
	</div>
	
	<script type="text/javascript">
		var vm= new Vue({
			el:".box",
			data:{
				a:0,
				colors:["red","pink","skyblue","orange","rgba(125,36,220,0.6)"],
				fons:["12px","20px","16px","14px","26px"]
			},
			methods:{
				click:function(){
					this.a = ++this.a%this.colors.length
				}
			}
		})
	</script>
4.vue綁定事件與生命鉤子
 
<div id="box" class="box">
		<p v-bind:style="{'color':colors[a],'fontSize':fons[a]}">hello world</p>
		<input type="button" v-bind:value="a+1" @click="click"> 
	</div>
	
	<script type="text/javascript">
		var vm= new Vue({
			el:".box",
			data:{
				a:0,
				colors:["red","pink","skyblue","orange","rgba(125,36,220,0.6)"],
				fons:["12px","20px","16px","14px","26px"]
			},
			beforeCreate(){
				setInterval(function(){
					this.click();
				}.bind(this),1000)
			},
			methods:{
				click:function(){
					this.a = ++this.a%this.colors.length
				}
			}
		})
	</script>
5.v-model
 
<div class="box" id="box">
		<input type="text" v-model="scale">
		{{ww(scale)}}
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#box",
			data:{
				scale:""
			},
			methods:{
				ww:function(scale){
					if(scale==""){
						return ""
					}
					if(isNaN(scale)){
						return "數據錯誤"
					};

					if(scale>=90 && scale<=100){
						return "優秀"
					}else if(scale>=75 && scale <90){
						return "良"
					}else if(scale>=60&& scale <75){
						return "及格"
					}else if(scale>=0 && scale <60){
						return "不及格"
					}else{
						return "錯誤了"
					}
				}
			}
		})
	</script>
6.v-for實現計算器
 
<div id="box" class="box">
		<p><input type="text" v-bind:value="a" ></p>
		<div class="con">
			<button v-for="item in nums" @click = "val(item)">{{item}}</button>
		</div>
			
	</div>
	
	<script type="text/javascript">
		var vm= new Vue({
			el:".box",
			data:{
				a:0,
				nums:['0','1','c','2','3','4','5','6','7','8','9','+','-','*','/','=']
			},
			methods:{
				val:function(n){
					if(n=="="){
						this.a=eval(this.a);
					}else if(n=="c"){
						this.a=0;
					}else{
						if(this.a==0){
							this.a=n;
						}else{
							this.a+=n;
						}
					}
					
				}
			}
		})
	</script>
7.v-for
 
<div id="box" class="box">
		<div class="con">
			<p v-for="(index,item) of nums" @click="al(item)">{{index}}------{{item}}</p>
		</div>
	</div>
	
	<script type="text/javascript">
		var vm= new Vue({
			el:".box",
			data:{
				a:0,
				nums:['0','1','c','2','3','4','5','6','7','8','9','+','-','*','/','=']
			},
			methods:{
				al:function(n){
					alert(n)
				}
			}
		})
	</script>
8.實現“全部”、“未完成”、“已完成”效果
 
<body>
	<div id="box" class="box">
		<input type="text" v-model="mes" @keyup.enter="add(mes)">
		<div class="con">
			<p v-for="(item,index) of getlist">
				<input type="checkbox" v-model="item.flag">{{item.value}}
			</p>
		</div>
		<p><span><i>{{this.nums.length}}</i>&nbsp;&nbsp;&nbsp;項未完成</span><br>
			<button @click="ww(0)">全部</button><button @click="ww(1)">已完成</button><button @click="ww(2)">未完成</button></p>
	</div>
	<script type="text/javascript">
		var vm= new Vue({
			el:".box",
			data:{
				a:0,
				mes:"",
				nums:[]
			},
			computed:{
				getlist:function(){
					var arr=[];
					if(this.a==0){
						for(var i=0;i<this.nums.length;i++){
							arr.push(this.nums[i])
						}
					}else if(this.a==1){
						for(var i=0;i<this.nums.length;i++){
							if(this.nums[i].flag){
								arr.push(this.nums[i])
							}
						}
					}else{
						for(var i=0;i<this.nums.length;i++){
							if(!this.nums[i].flag){
								arr.push(this.nums[i])
							}
						}
					}
					return arr;
				}
			},
			methods:{
				add:function(x){
					this.nums.push({
						value:x,
						flag:false
					});
					this.mes=''
				},
				ww:function(m){
					this.a=m;
				}
			}
		})
	</script>
</body>

image.png

9.請求數據
 
<body>
	<div class="box" id="box">
		<p><input type="text" v-model="city"></p>
		<p><input type="button" value = "登錄" @click = "login"></p>
		<p >{{tips}}</p>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#box",
			data:{
				city:"北京",
				tips:"還為返回數據"
			},
			methods:{
				login:function(){
					this.$http.jsonp("http://wthrcdn.etouch.cn/weather_mini?city="+this.city,
						{
							jsonp:"callback"
						}
					).then(function(data){
						console.log(data)
						this.tips ="數據成功返回"
					})
					
				}
			}
		})
	</script>
</body>

最新動態

常見問題百寶箱

全國服務熱線

027-89992189

掃一掃關注微信

Copyright 2013-2020 All Rights Reserved 武漢互贏網絡科技股份有限公司 鄂ICP備19027860號

獲取品牌營銷方案

快速填寫

馬上獲取

互聯網低成本創名牌從此開始！

主站蜘蛛池模板： 麦盖提县| 安康市| 南涧| 穆棱市| 聊城市| 若尔盖县| 普格县| 新营市| 驻马店市| 青神县| 仲巴县| 保靖县| 朝阳区| 镶黄旗| 石林| 无锡市| 珠海市| 胶南市| 彭州市| 禄丰县| 齐河县| 郎溪县| 朝阳市| 大关县| 怀宁县| 昌乐县| 陆川县| 瑞昌市| 伊通| 崇明县| 嘉鱼县| 吴忠市| 阜新| 墨玉县| 云梦县| 卢氏县| 大兴区| 呼和浩特市| 延川县| 浦东新区| 漯河市|