1 简易计算器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="lib/vue.js"></script> </head> <body> <div id="app" v-model="opt"> <input type="text" v-model="n1"> <select v-model="opt"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select > <input type="text" v-model="n2"> <input type="button" value="=" @click="calc"> <input type="text" v-model="result"> </div> <script> var vm=new Vue({ el:‘#app‘, data:{ n1:0, n2:0, result:0, opt:‘+‘ }, methods:{ calc(){ /* switch (this.opt) { case ‘+‘: this.result = parseInt(this.n1) + parseInt(this.n2) break; case ‘-‘: this.result = parseInt(this.n1) - parseInt(this.n2) break; case ‘*‘: this.result = parseInt(this.n1) * parseInt(this.n2) break; case ‘/‘: this.result = parseInt(this.n1) / parseInt(this.n2) break; default: break; */ //正式项目不推荐下面的写法 var codeStr=‘parseInt(this.n1)‘ + this.opt + ‘parseInt(this.n2)‘ this.result =eval(codeStr) } } } ) </script> </body> </html>
2. Vue中的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="lib/vue.js"></script> <style> .red{ color: red; } .thin{ font-weight: 200; } .italic{ font-style: italic } .active{ letter-spacing: 0.5em; } </style> </head> <body> <div id="app"> <!-- <h1 class="red thin">这是一个H1!!!</h1> --> <!--第一种使用方法,直接传递一个数组进去,必须用单引号来分开才会认为这是一个变量,否则会直接默认为是一个字符串--> <!-- <h1 :class="[‘red‘,‘italic‘]">这是一个H1!!!</h1> --> <!--在数组中使用三元表达式--> <!-- <h1 :class="[‘red‘,‘italic‘,flag?‘active‘:‘‘]">这是一个H1!!!</h1> --> <!--用对象的形式来代替三元表达式--> <!-- <h1 :class="[‘red‘,‘italic‘,{‘active‘:flag}]">这是一个H1!!!</h1> --> <!-- 直接使用对象,或者也可以直接把classobj中的内容 直接放到class中--> <h1 :class="calssobj">这是一个H1!!!</h1> </div> <script> var vm=new Vue({ el:"#app", data:{ flag:true, calssobj:{red:true,thin:true,italic:false,active:false} }, methods:{ } }) </script> </body> </html>
3. Vue的Class样式的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="lib/vue.js"></script> <style> .red{ color: red; } .thin{ font-weight: 200; } .italic{ font-style: italic } .active{ letter-spacing: 0.5em; } </style> </head> <body> <div id="app"> <!-- <h1 class="red thin">这是一个H1!!!</h1> --> <!--第一种使用方法,直接传递一个数组进去,必须用单引号来分开才会认为这是一个变量,否则会直接默认为是一个字符串--> <!-- <h1 :class="[‘red‘,‘italic‘]">这是一个H1!!!</h1> --> <!--在数组中使用三元表达式--> <!-- <h1 :class="[‘red‘,‘italic‘,flag?‘active‘:‘‘]">这是一个H1!!!</h1> --> <!--用对象的形式来代替三元表达式--> <!-- <h1 :class="[‘red‘,‘italic‘,{‘active‘:flag}]">这是一个H1!!!</h1> --> <!-- 直接使用对象,或者也可以直接把classobj中的内容 直接放到class中--> <h1 :class="calssobj">这是一个H1!!!</h1> </div> <script> var vm=new Vue({ el:"#app", data:{ flag:true, calssobj:{red:true,thin:true,italic:false,active:false} }, methods:{ } }) </script> </body> </html>
4. Vue的v-for的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="lib/vue.js"></script> </head> <body> <div id="app"> <!-- <p>{{list[0]}}</p> <p>{{list[1]}}</p> <p>{{list[2]}}</p> <p>{{list[3]}}</p> <p>{{list[4]}}</p> <p>{{list[5]}}</p> --> <!-- <p v-for="(item,i) in list">索引:{{i}}--{{item}}</p> --> <p v-for="(user,i) in LT">ID:{{user.ID}} --- name:{{user.name}} --- index:{{i}}</p> </div> <script> var vm=new Vue({ el:‘#app‘, data:{ list:[1,2,3,4,5,6,], LT:[ {ID:1,name:‘11‘}, {ID:2,name:‘22‘}, {ID:3,name:‘33‘}, {ID:4,name:‘44‘} ] }, methods:{} }) </script> </body> </html>
5. Vue v-for对象以及key的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="lib/vue.js"></script> </head> <body> <div id="app"> <!-- 遍历对象身上的键值对时 除了val,key还有一个索引i --> <!-- <p v-for="(val,key,i) in user"> 值:{{val}} --- 键:{{key}} 索引:{{i}}</p> --> <!-- <p v-for="count in 10">这是第 {{count}} 次循环</p> //循环数字,起始是1 --> <!-- for循环的key的使用 --> <div> <label >Id: <input type="text" v-model="id"> </label> <label>Name: <input type="text" v-model="name"> </label> <input type="button" value="添加" @click="add"> </div> <!-- 1 在使用key的时候一定要使用v-bind属性绑定形式,制定key的值 2 在组建中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题必须在使用v-for的同时, 制定唯一的字符串/数字类型:key值 --> <p v-for="item in list" :key="item"> <!-- 可以保证数据的唯一性 --> <input type="checkbox">{{item.id}} --- {{item.name}} </p> </div> <script> var vm=new Vue({ el:‘#app‘, data:{ list:[ {id:1,name:‘唐‘}, {id:2,name:‘宋‘}, {id:3,name:‘元‘}, {id:4,name:‘明‘}, {id:5,name:‘清‘} ] }, methods:{ add(){ this.list.unshift({id:this.id,name:this.name}); } } }) </script> </body> </html>
6. Vue的v-if和v-show的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="lib/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="点击" @click="flag=!flag"> <!-- v-if的特点:每次都会重新删除或创建元素 有较高的切换性能消耗 v-show的特点:每次不会进行DOM的删除或创建操作,只是切换了元素的display:nene的属性 有较高的初始或渲染消耗 如果元素要频繁的切换最好不要使用v-if 如果是永久性的不显示,则推荐v-if --> <P v-if="flag">Hello</P> <p v-show="flag">Word</p> </div> <script> //2.创建一个Vue实例 //当我们带入包之后,在浏览器内存中就多了一个Vue构造函数 var vm =new Vue( { el:‘#app‘, data :{ flag:true } } ) </script> </body> </html>
原文地址:https://www.cnblogs.com/LittleDuan/p/11257136.html
时间: 2024-10-15 16:46:54