作者:疯狂的地球人
https://blog.csdn.net/weixin_43742708/article/details/106658244
绑定Class
<style> .active{ border: 1px solid red; width: 100px; height: 100px; } .error{ background-color: orange; } .test{font-size:76px;}style><body> <div id="app"> <div v-bind:class="{active:isActive,error: isError}">测试样式1div> <div v-bind:class='classStr'>测试样式2div> <div v-bind:class='classArr'>测试样式3div> <div v-bind:class="['active','error',{test:isTest}]">测试样式4div> div> <script src="vue.js">script> <script> let vm = new Vue({ el:"#app", data:{ // 1 isActive:'true', isError:'true', // 2 classStr:'active error', // 3 classArr:['active','error'], //4数组里边可以直接绑定class isTest:'false', }, });script>body>
效果:
![30f5198361744c66396bc4fd57bf0966.png](https://i-blog.csdnimg.cn/blog_migrate/83ab9fb6c57d36e0282c2a9fc5df0c71.png)
绑定Style
<div id="app"> <div v-bind:style='{border:borderStyle,width:widthStyle,height:heightStyle}'>div> <div :style='{"color":"red","font-size":"30px"}'>对象语法div> <div :style='objStyles'>div> <div :style='[objStyles,overrideStyles]'>div>div><script> let vm = new Vue({ el:"#app", data:{ //1 borderStyle:'1px solid blue', widthStyle:'100px', heightStyle:'200px', //2 objStyles:{ border:'1px solid green', width:'200px', height:'100px' }, //3 overrideStyles:{ border:'5px solid orange', backgroundColor:'blue', } } }); script>
选择结构与循环结构
选择结构 v-if
注意:
因为v-show总是会渲染,而只是控制display为none还是显示 。
因此会造成不必要的资源浪费。
![36dc2b80cdbf99bcb23da5dabd9caf0b.png](https://i-blog.csdnimg.cn/blog_migrate/01f72d6e3da85f66ed8bcb18d3393b96.png)
实例:根据成绩显示对应评语
<div id="app"> <div v-if='score>=90'>优秀div> <div v-else-if='score<90 && score>=80'>良好div> <div v-else-if='score<80 && score>=60'>一般div> <div v-else>比较差div> <div v-show='flag'>测试v-showdiv> <button v-on:click='handle'>点击button>div><script src="vue.js">script><script> let vm = new Vue({ el:"#app", data:{ score:50, flag:false }, methods:{ handle:function(){ this.flag = !this.flag } } });script>
效果:
![dce322931b42abc46921d331bcaadb7b.gif](https://i-blog.csdnimg.cn/blog_migrate/7409f77fb4c827179b648dbe917578a1.gif)
实例:随机数大于0.5显示
<div id="app"> <h2 v-text='value'>h2> <p v-if='value>0.5'>显示的p> <p v-else>隐藏的p>div><script src="vue.js">script><script> let vm = new Vue({ el:"#app", data:{ value:Math.random() } });script>
效果:
![7e03123abb8a559f2a39db9167e087df.gif](https://i-blog.csdnimg.cn/blog_migrate/3de96ad7c70fc64f7de3252eeb2710cb.gif)
循环结构 v-for
![69f1f2794cf670cd4568c619b328c4ff.png](https://i-blog.csdnimg.cn/blog_migrate/1b84481d0ee2b3b3badf43631f35ba91.png)
循环数组、对象数组
<div id="app"> <div>水果列表div> <ul> <p>循环数组p> <li v-for='item in fruits'>{{item}}li> <p>循环数组并且输出索引p> <li v-for='(item,index) in fruits'>{{item + '---' + index}}li> <p>循环对象数组p> <li :key='item.id' v-for='(item,index) in myFruits'> <span>index:{{index}}span> <span>---span> <span>ename:{{item.ename}}span> <span>---span> <span>cname:{{item.cname}}span> li> ul> div> <script> let vm = new Vue({ el:"#app", data:{ fruits:['apple','orange','banana'], // 注意:这是对象数组 myFruits:[{ id:1, ename:'apple', cname:'苹果' },{ id:2, ename:'orange', cname:'橘子' },{ id:3, ename:'banana', cname:'香蕉' }] } });script>
效果:
![bbbb5e661dae1c254c2853a5cf41dc1a.png](https://i-blog.csdnimg.cn/blog_migrate/b6b0af7c2d6052c57bddabee12551a25.png)
v-if和v-for结合使用
<div id="app"> <div v-if='v==13' v-for='(v,k,i) in obj'>{{v+'------'+k+'------'+i}}div>div><script> let vm =new Vue({ el:"#app", data:{ obj:{ uname:'zhangsan', age:'13', gender:'female' } } });script>
效果:
![17cb81ea16943ad0bdf9075b3a777b31.png](https://i-blog.csdnimg.cn/blog_migrate/aab9501c7c4afc9affe9adf2b89cef77.png)
实例:输出未报到的学生
<div id="app"> <strong>没有报道的学生名单:strong> <ul> <li v-if='value.state == "" ' v-for='(value,key) in studentArrObj'> <span>{{value.name}}span> li> <br> <li v-if='value[1] == "" ' v-for='(value,key) in studentArr'> <span>{{value[0]}}span> li> ul>div><script> let vm = new Vue({ el:"#app", data:{ studentArr:[['小明',''],['小红','已报到'],['小华','已报到'],['小思','']], studentArrObj:[{ name:'小明', state:'' },{ name:'小红', state:'已报到' },{ name:'小华', state:'已报到' },{ name:'小思', state:'' }], } })script>
效果:
![ba96ec86961491a656a59b27cc422507.png](https://i-blog.csdnimg.cn/blog_migrate/fd0213b165d359c0c641dd836014551e.png)
![3ff19c44d68009e6df0378dbcc95e3fa.png](https://i-blog.csdnimg.cn/blog_migrate/e0dff35e452c1b34d589eada4eeecbd4.jpeg)
更多前端分享,请关注:
前端路人甲