<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>
<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 "错误了"
}
}
}
})
</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:"北京",
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>
最新动态
常见问题百宝箱
A2014，有位学妹不顾家人反对，在上海这个国际化大都市谋了一个公众号助理的职位。斗志昂扬地奋斗了 3 年，我眼看着她的内容驾驭能力突飞猛进，内容质量从三流到一流，职位
A文章主要分析了不同的视觉设计元素是如何影响网站用户体验，希望通过文章的解读能够对你的产品设计带来些启发。 也许是因为我在视觉设计上没有太多经验，我发现
A双赢系统建站系统，三网同步，建站推广一步到位双赢系统建站系统，三网同步，建站推广一步到位双赢系统建站系统，三网同步，建站推广一步到位双赢系统建站系统，三网同步，建站推
Copyright 2013-2020 All Rights Reserved 武汉互赢网络科技股份有限公司 鄂ICP备19027860号
