当前位置：首页 > news >正文

Vue02

news 来源：原创 2025/4/27 17:49:33

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有什么作用

虚拟DOM中key的作用
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较
比较规则
旧虚拟DOM中找到与新虚拟DOM相同的key

1. 若虚拟DOM中内容没有改变，直接用之前的真实DOM
  
2. 若改变了，则生成新的真实DOM，随后替换掉页面之前的真实DOM

没有找到相同的key

1. 创建新的真实DOM，随后渲染到页面

用index作为key可能会引发的问题
若对数据进行：逆序添加，逆序删除等破坏顺序操作

1. 会产生没有必要的真实DOM更新 ==>界面没有问题，但效率低

如果结构中还包含输入类的DOM

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

在开发中如何选择key

最好使用每条数据的唯一标识作为key，比如id,手机号，身份证号，学号等唯一值
如果不存在对数据的逆序添加，逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的
- {{person.name}} - {{person.gender}}

列表过滤

数据监视实现

计算属性实现

      <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
	}
},