Vue02

Vue02

绑定class样式

  • 字符串写法,适用于:样式的类名不确定,需要动态指定

  • 数组写法,适用于:要绑定的样式个数不确定,名字也不确定

  • 对象写法,适用于:要绑定的样式个数缺点,名字也确定,但是要动态决定用不用

    ...
    //方式一

绑定style样式

复制代码
<div :style="styleObj">{{name}}</div>


new Vue({

    ....

    styleObj:{
        fontSize:"40px",
        color:"red",
        backgroundColor:'orange'
    }
})

条件渲染

  • v-if

    • 写法

    • v-if="表达式"

    • v-else-if="表达式"

    • v-else="表达式"

    • 适用于:切换频率低的场景

    • 特点:不展示的DOM元素直接被移除

    • 注意:v-if可以和v-else-if,v-else 一起使用,但要求结构不能被打断

  • v-show

    • 写法:v-show="表达式"

    • 适用于:切换频率较高的场景

    • 特点:不展示的DOM元素未被移除,仅仅使用样式隐藏掉

  • 注:使用v-if时,元素可能无法被获取到,而使用v-show一定可以获取到

注:template标签不会破坏DOM结构

复制代码
<div id="root5">
    <button @click="n++">n值加1</button>
    <span>{{n}}</span>
    <template v-if="n===1">
        <h1>好人</h1>
        <h1>坏人</h1>

    </template>
</div>

列表渲染

  • 遍历数组

  • 遍历对象

  • v-for 指令

    • 用于展示列表数据

    • 语法:v-for="(item,index) in xxx" :key="yy"

    • 可遍历:数组,对象,字符串(少),指定次数(少)

注:对象时,前面一个参数是val,后面的key

记忆:key也是一种另外的索引

理解key这个属性

Vue中key有什么作用

  1. 虚拟DOM中key的作用

  2. key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较

  3. 比较规则

  4. 旧虚拟DOM中找到与新虚拟DOM相同的key

    1. 若虚拟DOM中内容没有改变,直接用之前的真实DOM

    2. 若改变了,则生成新的真实DOM,随后替换掉页面之前的真实DOM

  5. 没有找到相同的key

    1. 创建新的真实DOM,随后渲染到页面
  6. 用index作为key可能会引发的问题

  7. 若对数据进行:逆序添加,逆序删除等破坏顺序操作

    1. 会产生没有必要的真实DOM更新 ==>界面没有问题,但效率低
  8. 如果结构中还包含输入类的DOM

    1. 会产生错误的DOM更新==>界面有问题

在开发中如何选择key

  1. 最好使用每条数据的唯一标识作为key,比如id,手机号,身份证号,学号等唯一值

  2. 如果不存在对数据的逆序添加,逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的

列表过滤

  • 数据监视实现

  • 计算属性实现

    复制代码
          <div id="root">
              <input type="text" placeholder="请输入要查找的姓名" v-model="name_word">
              <ul>
                  <li v-for="person in serchPerson" :key="person.id"  >
                      {{person.name}} - {{person.gender}}
                  </li>
              </ul>
              <button @click="addPerson">添加人员</button><br>
          </div>
          <script type="text/javascript">
              Vue.config.productionTip = false;
              new Vue({
                  el:'#root',
                  data:{
                      personList:[
                      { name:'好人',id:'1',gender:'男',},
                      { name:'坏人',id:'2',gender:'男',},
                      { name:'光头强',id:'3',gender:'男',},
                      ],
                      personEnd:[],
                      name_word:'',
                  },
                  methods: {
                      addPerson(){
                          this.personList.unshift({name:'大人',id:'4',gender:'女'})
                      }
    
    
                  },
                  computed:{
                      serchPerson(){
                          return this.personList.filter((p)=>{
                              return p.name.indexOf(this.name_word) !== -1
                          })
                      }
                  },    
              })
          </script>
      </body>

列表排序

复制代码
<div id="root">
	<input type="text" placeholder="请输入要查找的姓名" v-model="name_word">
	<ul>
		<li v-for="person in serchPerson" :key="person.id"  >
			{{person.name}} - {{person.gender}} - {{person.age}}
		</li>
	</ul>
	<button @click="addPerson">添加人员</button><br><br>
	<button @click="type = 1">年龄升序</button>
	<button @click="type = 2">年龄降序</button>
	<button @click="type = 0">  原顺序</button>
</div>



....



computed:{
	serchPerson(){
		const arr = this.personList.filter((p)=>{
			return p.name.indexOf(this.name_word) !== -1
		})
		if(this.type){
			arr.sort((p1,p2) =>{
					return this.type === 1 ? p1.age - p2.age : p2.age - p1.age
			})
		}
		return arr
	}
},
相关推荐
尘世中一位迷途小书童1 分钟前
从零实现 Canvas 图形拖拽:让你的网页动起来!
前端
mrsk2 分钟前
JavaScript之变量的解构赋值全面解析(●'◡'●)
前端·javascript·面试
归于尽2 分钟前
回调函数在Node.js中是怎么执行的?
前端·javascript·node.js
浏览器API调用工程师_Taylor7 分钟前
Look my eyes 都2025年了,你还不会将重复的事情自动化?
前端·javascript·爬虫
袁煦丞10 分钟前
安卓开发者的救星Docker-Android:cpolar内网穿透实验室第651个成功挑战!
前端·程序员·远程工作
zhaocarbon11 分钟前
vue2 echarts中国地图、在地图上标注经纬度及标注点
前端·javascript·echarts
咔咔咔索菲斯24 分钟前
Vue 中mounted 生命周期钩子的执行时机和 v-for 的渲染顺序
前端·javascript·vue.js
前端小咸鱼一条24 分钟前
Vue响应式原理一:认识响应式逻辑
前端·javascript·vue.js
程序员秘密基地24 分钟前
基于html,css,vue,vscode,java,springboot,mysql数据库,在线考勤,管理系统
java·vue.js·spring·html·web app
paopaokaka_luck1 小时前
基于Spring Boot+Vue的巴彦淖尔旅游网站(AI问答、腾讯地图API、WebSocket及时通讯、支付宝沙盒支付)
数据库·vue.js·spring boot·websocket·mysql·毕业设计·旅游