我的vu啊（vue 2.0 指令，自定义指令及用法）

最新推荐文章于 2024-09-27 15:27:45 发布

昌周

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量170

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45623378/article/details/126744003

版权

<template>
   <div>
        <div @click="showValue = false" v-if="showValue">点击关闭销毁dom</div>
        <div @click="showValue = false"  v-show="showValue">隐藏元素</div>
        <div @click="showValue = false"  v-once>我只说一次哈:{{showValue}}</div>
        <div v-for=" item in 10" :key="item">{{item}}循环</div>
<!--        // 不建议使用会被攻击-->
        <div v-html="value"></div>
         // 阻止初始化编译
        <div v-pre>{{value}}</div>
        <div >{{value}}</div>
        阻止冒泡
       <div v-on.stop="chengname"></div>
       触发一次
       <div v-on.once="chengname"></div>
       <div v-on.capture="chengname"> </div>
       触发一次
       <div v-on.self="chengname"></div>
       阻止默认事件
       <div v-on.prevent="chengname"></div>
       <div v-getValue="showValue"></div>
       <input v-model="showValue">
   </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      showValue: true,
      value: '<p>55555</p>',
    };
  },
  methods: {
    chengname() {
    },
  },
  created() {
  },
  mounted() {
  },
  directives: {
    getValue(element, binding) {
      console.log('element', element);
      console.log('element', binding);
    },
  },
};
</script>