【尚硅谷 Vue学习笔记】p26绑定css样式 p27绑定Style样式 p28条件渲染 p29列表渲染 p30key作用与原理（重要）

潮.eth

已于 2022-11-17 08:53:05 修改

阅读量267

点赞数 6

分类专栏： # Vue 文章标签： vue.js css 学习

于 2022-11-16 22:22:32 首次发布

本文链接：https://blog.csdn.net/m0_54381284/article/details/127894824

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

p26绑定css样式

先给出样式：

		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}
		</style>

动态绑定样式：

1.绑定claass样式-字符串写法，适用于：样式的类型不确定，需要动态指定。

<div class="root">
    <div class="basic" :class="classmood" @click="changeMood">{{name}}</div>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip=false;

    new Vue({
      el:'.root',
      data:{
        name:'卧槽',
        mood:'happy'
      },
      methods:{
        changeMood(){
          this.classmood='sad'
        }
      }
    })
  </script>

升级一下：可以随机展现心情：

<script type="text/javascript">
    Vue.config.productionTip=false;

    new Vue({
      el:'.root',
      data:{
        name:'卧槽',
        mood:'happy'
      },
      methods:{
        changeMood(){
          const arr=['happy','sad','normal']//索引值为0,1,2
          const index=Math.floor(Math.random()*3)//random[0,1) random*3[0,3)
          this.mood=arr[index]
        }
      }
    })
  </script>

2.绑定class样式-数组写法。适用于：要绑定的样式个数不确定，名字也不确定

<div class="basic" :class="arr">{{name}}</div>

    new Vue({
      el:'.root',
      data:{
        name:'卧槽',
        mood:'happy',
        arr:['atguigu1','atguigu2','atguigu3']
      },
      methods:{
        changeMood(){
          const arr=['happy','sad','normal']//索引值为0,1,2
          const index=Math.floor(Math.random()*3)//random[0,1) random*3[0,3)
          this.mood=arr[index]
        }
      }
    })

3.绑定class样式–对象写法：适用于要绑定的样式个数确定、名字也确定，但要动态决定用不用

<div class="basic" :class="classObj">{{name}}</div>

data:{
        name:'卧槽',
        mood:'happy',
        arr:['atguigu1','atguigu2','atguigu3'],
        classObj:{
            atguigu1:false,
            atguigu2:false,
          }
      },

p27绑定Style样式

<!-- 绑定style样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>

styleObj:{
	fontSize: '40px',
	color:'red',
		},
styleObj2:{
	backgroundColor:'orange'
	},
	styleArr:[
	{
		fontSize: '40px',
		color:'blue',
	},
	{
	backgroundColor:'gray'
	}
]

总结：

p28条件渲染

v-show隐藏跟显示结点(频率低)

v-if是否存在结点（频率高）

 <div class="root">
    <h2>当前的n的值是:{{n}}</h2>
    <button @click="n++">点我n+1</button>
    <h1>欢迎来到{{name}} v-show:true</h1>
    <br/>

  <div v-if="n===1">Angular</div>
  <div v-if="n===2">React</div>
  <div v-if="n===3">Vue</div>
  </div>

总结：

条件渲染：

1.v-if

写法：

(1).v-if=“表达式”

(2).v-else-if=“表达式”

(3).v-else=“表达式”

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show

写法：v-show=“表达式”

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

p29列表渲染

遍历数组：

基本列表长这个样子：

代码：

<body>
  <!--准备好一个容器-->
  <div class="root">
    <ul>
      <li v-for="p in persons">
        {{p.name}}-{{p.age}}
      </li>
    </ul>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip=false;

    new Vue({
      el:'.root',
      data:{
        persons:[
          {id:'001',name:'张三',age:18},
          {id:'002',name:'李四',age:19},
          {id:'003',name:'王二麻',age:20}
        ]
      }
    })
  </script>
</body>

效果：

in可以写of

遍历对象类型：

遍历字符串：

遍历指定次数：

总结：

v-for指令:

1.用于展示列表数据

2.语法：v-for=“(item, index) in xxx” :key=“yyy”

3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

p30key作用与原理（重要）

点击添加一个老刘：

<div class="root">
    <ul>
      <button @click.once="add">加个老刘</button>
      <br><br>
      <li v-for="p in persons" :key="index">
        {{p.name}}-{{p.age}}
        <input type="text">
      </li>
    </ul>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
      el: '.root',
      data: {
        persons: [
          { id: '001', name: '张三', age: 18 },
          { id: '002', name: '李四', age: 19 },
          { id: '003', name: '王二麻', age: 20 }
        ]
      },
      methods: {
        add(){
          const p={id:'004',name:"老牛",age:40}
          this.persons.unshift(p)
        }
      },
    })
  </script>

但是用index会出现问题

用p.id数据的唯一标识

面试题：react、vue中的key有什么作用？（key的内部原理）

					 1. 虚拟DOM中key的作用：
									key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 
                    									随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
									
					2.对比规则：
								(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
											①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
											②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

								(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
											创建新的真实DOM，随后渲染到到页面。
											
					3. 用index作为key可能会引发的问题：
										1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
														会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

                      										2. 如果结构中还包含输入类的DOM：
														会产生错误DOM更新 ==> 界面有问题。

            					4. 开发中如何选择key?:
										1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
										2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
											使用index作为key是没有问题的。							使用index作为key是没有问题的。

潮.eth

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
4
评论
【尚硅谷 Vue学习笔记】p26绑定css样式 p27绑定Style样式 p28条件渲染 p29列表渲染 p30key作用与原理（重要）

p26绑定css样式p27绑定Style样式p28条件渲染p29列表渲染p30key作用与原理（重要）
复制链接

扫一扫