关于0xff00

Posted 2023-05-05

这个的二进制和十进制分别是多少
以及0xff00>>8又是什么回事, c=(p&0xff00)>>8;

打开计算器算一下，0xff00是65208，二进制是1111111100000000
0xff00>>8是指将0xff00这个数值按照二进制位右移8位，如果没记错的话，移动完之后就是0000000011111111。
c=(p&0xff00)>>8是指0xff00和p按位与，结果在右移8位，然后把所得结果赋给c 参考技术A c=(p&0xff00)>>8;就是取P的高8位

008.关于样式

样式绑定

• • 01. class绑定
  • • （1）对象方法
    • （2）数组方法
    • （3）计算属性
  • 02. 内联样式
  • • （1）对象语法
    • （2）数组语法
  • 03. 单文件组件

---

01. class绑定

（1）对象方法

• 通过 true | false来控制class是否启用

  <div :class="{ class1: show1, class2: show2 }">内容</div>
  <div :class="classObj">内容</div>
  // class1、class2 都是已经定义好的类名
  <script>
      export default {
          data(){
              return {
                  show1: true,
                  show2: false,
                  // 也可以直接写成对象形式
                  classObj: {
                      class1: true,
                      class2: false
                  }
              }
          }
      }
  
  </script>
  

（2）数组方法

• 将class类写在数组内

  <div :class="[ activeClass1, activeClass2 ]"></div>
  // class1、class2 都是已经定义好的类名
  <script>
      export default {
          data(){
              return {
                  activeClass1: 'class1',
                  activeClass2: 'class2'
              }
          }
      }
  </script>
  

• 三元运算

  <div :class="[ isActive ? activeClass1 : activeClass2 ]"></div>
  <script>
      export default {
          data(){
              return {
                  // 通过 isActive 来控制显示 class1 或者 class2
                  isActive: true,
                  activeClass1: 'class1',
                  activeClass2: 'class2'
              }
          }
      }
  </script>
  

• 数组内的对象

  • 对数组中其中一个元素单独使用对象的形式进行判断

  <div :class="[ { 'class2':isActive }, activeClass1 ]"></div>
  

（3）计算属性

• 或者返回一个对象或者数组的计算属性

  <div v-bind:class="classObject"></div>
  <script>
      export default {
          data: {
              isActive: true
          },
          computed: {
              classObject: function () {
                  return {
                      class1: this.isActive,
                  }
              }
          }
      }
  </script>
  

02. 内联样式

• v-bind:style 的对象语法十分直观
  • 看着非常像 CSS，但其实是一个 JavaScript 对象
  • CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (‘kebab-case’，记得用引号括起来) 来命名

（1）对象语法

• 可以在 v-bind:style 直接设置样式

  <div id="app">
      <div :style="{color: cl, background: bg, fontSize: fz+'px'}"> 内联样式 </div>
      <div :style="styleObj"> 样式对象 </div>
  </div>
  <script>
      new Vue({
          el: '#app',
          data:{
              cl: 'red',
              bg: 'yellow',
              fz: 20,
              // 或者将样式直接绑定到一个样式对象
            styleObj: {
                  color: 'red',
                  background: 'yellow',
                  fontSize: '20px',
              }
          }
      })
  </script>
  

（2）数组语法

• 数组语法可以将多个样式对象应用到同一个元素上

  <div :style="[styleObj1, styleObj2]"></div>
  <script>
      new Vue({
          el: '#app',
          data:{
              styleObj1: {
                  color:'red',
                  background:'yellow'
              },
              styleObj2: {
                  fontSize: '20px',
                  fontWeight: 'bold'
              }
          }
      })
  </script>
  

03. 单文件组件

• 在单文件组件中，需要给<style>标签添加scoped属性，以确保样式只作用在当前组件上

  <style scoped></style>