vue常用指令和标签

最新推荐文章于 2024-04-13 11:14:15 发布

有名的卡德除

最新推荐文章于 2024-04-13 11:14:15 发布

阅读量857

点赞数 1

分类专栏：前端文章标签： vue v-bind v-model

本文链接：https://blog.csdn.net/tiwei6281/article/details/88714022

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1v-text,v-html,v-cloak

v-text会覆盖元素中原本的内容，但是 v-cloak(插值表达式) 只会替换自己的这个占位符，不会把整个元素的内容清空
v-html是以HTML的格式插入

2v-bind,v-on

v-bind Vue提供的属性绑定机制 缩写是 :
v-on Vue提供的事件绑定机制 缩写是 @

 <input type="button" value="按钮"  v-bind:title="mytitle" v-on:click="show">

这里show是一个方法可以加()可以不加()

3 v-model

v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定
使用 v-model 指令，可以实现表单元素和 Model 中数据的双向数据绑定
v-model 只能运用在表单元素中,input(radio, text, address, email…) select checkbox textarea

<body>
  <div id="app">
    <h4>{{ msg }}</h4>
    <input type="text" style="width:100%;" v-model="msg">
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '大家都是好学生！'
      },
      methods: {
      }
    });
  </script>
</body>

4 v-for

1v-for 遍历数组

<body>
  <div id="app">
    <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: 'zs1' },
          { id: 2, name: 'zs2' },
          { id: 3, name: 'zs3' },
          { id: 4, name: 'zs4' }
        ]
      },
      methods: {}
    });
  </script>
</body>

2 v-for迭代对象

<body>
  <div id="app">
    <!-- 注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  -->
    <p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        user: {
          id: 1,
          name: '托尼·屎大颗',
          gender: '男'
        }
      },
      methods: {}
    });
  </script>
</body>

3v-for迭代数字

<body>
  <div id="app">
    <!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
    <p v-for="count in 10">这是第 {{ count }} 次循环</p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>
</body>

4 在2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的

    <p v-for="item in list" :key="item.id">
      <input type="checkbox">{{item.id}} --- {{item.name}}
    </p>

key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值

5 v-if ,v-show

    <h3 v-if="flag">这是用v-if控制的元素</h3>
    <h3 v-show="flag">这是用v-show控制的元素</h3>

6 在 VM 实例中，如果要访问 data 上的数据，或者要访问 methods 中的方法，必须带 this

7常见标签

component, template, transition, transitionGroup