vue指令

最新推荐文章于 2022-07-03 16:39:17 发布

范先生你好

最新推荐文章于 2022-07-03 16:39:17 发布

阅读量85

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46521165/article/details/108439109

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

v-if

<template>

  <div class="hello">

    <p v-if="show">显示文本</p>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      show: true
    }
  }
}

</script>

v-bind

动态更新html上的属性，比如，id,class等

<template>

  <div class="hello">
<a v-bind:href = "url">链接</a>
<img v-bind:src="imgUrl">

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      url: 'https://www.baidu.com/',
      imgUrl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3347668329,3836089970&fm=26&gp=0.jpg'
    }
  }
}

</script>