Vue中的is和操作DOM

2020-04-17 11:19:55

参考地址 Vue中的is和操作DOM

(1) Vue中的is属性

vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题,譬如ul里面要接上li的标签,引入is的属性后,你完全可以写成这样

<body>
  <div id="app">
    <table>
      <tbody>
        <tr is="row"></tr>
        <tr is="row"></tr>
        <tr is="row"></tr>
      </tbody>

    </table>

  </div></body><script>
  let row = {
    data() {
      return {
        content: "这个就是222行"
      }
    },
    template: '<li>{{content}}</li>'
  };
  let app = new Vue({
    el: "#app",
    data: {
      message: "Hello World!"
    },
    components: {
      row
    }
  })</script>

(2) Vue中的DOM操作

Vue中的DOM操作必须借助ref
this.$refs 获取到所有的ref引用,然后找到引用的元素
例如

<body>
  <div id="app">
    <div @click="dianji" ref='hello'>Hello world</div>
  </div></body><script>
  let app = new Vue({
    el: "#app",
    data() {
      return {
        msaage: "测试点击我开始"
      }
    },
    methods: {
      dianji() {
        console.log(this.$refs.hello);
        this.$refs.hello.style["color"] = "red";
      }
    },
  })</script>


  • 2019-10-10 00:21:35

    laravel 5.6以上日志理解及日志格式定义

    Laravel/Lumen的日志默认是基于Monolog进行了一层封装,如果要求不高,用起来还是十分容易的,本文基于laravel5.6/Lumen5.6版本进行解说。5.6版对日志系统做了升级,将日志的配置单独放以了config/logging.php 配置文件中,所以现在实用多了。

  • 2019-10-10 10:10:49

    @Scheduled注解各参数详解

    每隔5秒执行一次:*/5 * * * * ? 每隔1分钟执行一次:0 */1 * * * ? 每天23点执行一次:0 0 23 * * ? 每天凌晨1点执行一次:0 0 1 * * ? 每月1号凌晨1点执行一次:0 0 1 1 * ? 每月最后一天23点执行一次:0 0 23 L * ? 每周星期天凌晨1点实行一次:0 0 1 ? * L 在26分、29分、33分执行一次:0 26,29,33 * * * ? 每天的0点、13点、18点、21点都执行一次:0 0 0,13,18,21 * * ?

  • 2019-10-10 11:07:47

    Java8 - Map更优雅的迭代方式:forEach

    用于两个参数之间进行操作的函数式接口是 BiConsumer。这个函数式接口正好用来操作 Map 的 key 和 value。JDK8强化了针对 Map 类的迭代方式,新增了一个默认方法 forEach,它接收一个 BiConsumer 函数。JDK给出的描述如下:

  • 2019-10-11 13:48:00

    关于Integer比较相等的问题

    原来两个Integer类型的数字不能用==来判断,要用equal 不过Integer类型的可以与1,2这样的纯数字来判断