六、Vue指令(三)

最新推荐文章于 2022-11-05 00:06:21 发布

weixin_43791795

最新推荐文章于 2022-11-05 00:06:21 发布

阅读量61

点赞数

分类专栏： vue 文章标签： v-bind 简单的v-on

本文链接：https://blog.csdn.net/weixin_43791795/article/details/99890793

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

v-bind

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="root">
    <!-- v-bind 动态的绑定一个或多个特性 -->

    <!-- 这里没有绑定 -->
    <span title="title">1</span>
    <!-- 动态的绑定 -->
    <span v-bind:title="title">2</span>
    <!-- v-bind简写为 : -->
    <span :title="title">3</span>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    const app = new Vue({
      el: '#root',
      data() {
        return {
          title: '你好',
          isModalShow: true
        }
      },
    })
  </script>
</body>
</html>

F12的Elements展现情况
在这里插入图片描述
v-bind的实际应用场景
当我们使用v-for进行循环渲染数据时，每个元素都需要带有一个唯一的key值，这个时候就需要用到v-bind了

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="root">
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    const app = new Vue({
      el: '#root',
      data() {
        return {
          list: [
            {
              id: 1,
              title: '吃饭'
            }, {
              id: 2,
              title: '睡觉'
            }, {
              id: 3,
              title: '敲代码'
            }
          ]
        }
      },
    })
  </script>
</body>
</html>

又或者你可能你需要某个元素上的某个属性带上javaScript特性时，就可以用v-bind实现。如果说没有使用v-bind，那么带上的就是字符串。详情看上图效果。

事件指令`v-on`绑定事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box{
      width: 80px; 
      height: 80px; 
      background-color: aqua; 
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <div id="root" v-cloak>
    <!-- v-on:事件名 用于绑定一个事件，这个事件里可以直接操作data里的数据 -->
    <button v-on:click="isModalShow = !isModalShow">显示/隐藏</button>
    <!-- v-on:事件名 可以缩写为 @事件名 -->
    <button @click="isModalShow = !isModalShow">显示/隐藏</button>
    <! -- 写成方法 -->
    <button @click="toogleModalShow">显示/隐藏</button>
    <div 
      v-if="isModalShow" 
      class="box"
    />
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    const app = new Vue({
      el: '#root',
      // 这里说明下，参数一般都放在data里，data可以是一个对象
      // 也可以是一个方法返回对象
      // 无特殊情况下，都要采取第二种，方法返回对象，因为这样是为了避免修改原数据
      data() {
        return {
          isModalShow: true
        }
      },
      // 在Vue里，方法都需要放在methods里面
      methods: {
        toogleModalShow() {
          this.isModalShow = !this.isModalShow
        }
      }
    })
  </script>
</body>
</html>

weixin_43791795

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
六、Vue指令(三)

v-bind<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
复制链接

扫一扫