<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 "錯誤了(le)"
}
}
}
})
</script>
</body>
<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>
<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>
<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>
<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 "錯誤了(le)"
}
}
}
})
</script>
<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>
<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>
<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> 項未完成</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>
<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:"北(běi)京",
tips:"還(hái)爲返回數據"
},
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>
最新動态
常見問題百寶箱
A2014，有位學妹不顧家人(rén)反對(duì)，在上海這(zhè)個(gè)國際化(huà)大(dà)都市謀了(le)一個(gè)公衆号助理(lǐ)的(de)職位。鬥志昂揚地奮鬥了(le) 3 年，我眼看著(zhe)她的(de)内容駕馭能力突飛(fēi)猛進，内容質量從三流到一流，職位
A文章(zhāng)主要分(fēn)析了(le)不同的(de)視覺設計元素是如何影(yǐng)響網站用(yòng)戶體驗，希望通(tōng)過文章(zhāng)的(de)解讀能夠對(duì)你的(de)産品設計帶來(lái)些啓發。 也(yě)許是因爲我在視覺設計上沒有太多(duō)經驗，我發現
A雙赢系統建站系統，三網同步，建站推廣一步到位雙赢系統建站系統，三網同步，建站推廣一步到位雙赢系統建站系統，三網同步，建站推廣一步到位雙赢系統建站系統，三網同步，建站推
Copyright 2013-2020 All Rights Reserved 雲南雲豹網絡科技股份有限公司
