css 中权重优先级最高的是什么？
选择器的权重值
-
id选择器的权重为 100 -
标签选择器的权重为 1
-
class选择器的权重为 10 -
内联选择器的权重为 1000
-
!important优先级是最高的<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { color: yellow !important; } .title { color: blue; } .text { color: pink; } </style> </head> <body> <div id="title" class="text" style="color: red">css权重优先级</div> </body> <script></script> </html>
js 中的真假值
在 js 中假值有0、false、null、''、undefined、NaN
<script>
console.log(Boolean(0)); // false
console.log(Boolean(false)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
</script>
在 js 中真值有 true、[]、{}
<script>
console.log(Boolean(true)); // true
console.log(Boolean([])); // true
console.log(Boolean({
})); // true
</script>
vue 面试题
1. v-if和v-show区别
1.1 区别一：展示的形式不同
-
v-if是创建一个dom节点-
当
isShow为false时<template> <div class="home"> <h1 v-if="isShow">小鹿</h1> </div> </template> <script> export default { name: "home", data() { return { isShow: false, }; }, }; </script>
-
当
isShow为true时<template> <div class="home"> <h1 v-if="isShow">小鹿</h1> </div> </template> <script> export default { name: "home", data() { return { isShow: true, }; }, }; </script>
-
-
v-show是display:none、block -
当
isShow为false时<template> <div class="home"> <h1 v-show="isShow">小鹿</h1> </div> </template> <script> export default { name: "home", data() { return { isShow: false, }; }, }; </script>
-
当
isShow为true时, 没有变化还是正常的创建标签。<template> <div class="home"> <h1 v-show="isShow">小鹿</h1> </div> </template> <script> export default { name: "home", data() { return { isShow: true, }; }, }; </script>
1.2 区别二：使用场景不同
- 初次加载
v-if要比v-show好，页面不会多加载盒子。 - 频繁切换
v-show要比v-if好，创建和删除的开销太大了，显示和隐藏开销较小。
2.scoped 原理
2.1 作用：
-
让样式在本组件中生效，不影响其他组件。
-
当没有给style样式添加 scoped
-
在 home.vue 里面
<template> <div class="home"> <h1>首页</h1> </div> </template> <script> export default {}; </script> <style> h1 { color: red; } </style> -
在 about.vue 里面
<template> <div class="about"> <h1>其他</h1> </div> </template> <script> export default {}; </script> <style></style>
-
-
2.2 原理：
-
给节点新增自定义属性，然后 css 根据属性选择器添加样式。
-
给 home.vue 添加了 scoped 后
<template> <div class="home"> <h1>首页</h1> </div> </template> <script> export default {}; </script> <style scoped> h1 { color: red; } </style> -
在 about.vue 里面
<template> <div class="about"> <h1>其他</h1> </div> </template> <script> export default {}; </script> <style></style>
-