Vue(2)——Vue指令

v-html

v-show和v-if

v-else和v-else-if

v-on

v-bind

v-for

v-model

v-html

设置元素的innerHTML

复制代码

<body>
  <div id="app">
    <div v-html="msg"></div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: `<a href='http://www.baidu.com'>aa</a>`
      }
    })
  </script>
</body>

v-show和v-if

控制元素显示隐藏

v-show='表达式' true为显示，false为隐藏

原理：切换display:none控制显示隐藏

v-if='表达式' true为显示，false为隐藏渲染隐藏

原理：基于条件判断，是否创建或移除元素节点

v-else和v-else-if

辅助v-if进行判断渲染

v-on

作用：注册事件 = 添加监听+提供处理逻辑

语法：

v-on:事件名 = ''内联语句"

v-on:事件名='methods的函数名'

v-on:事件名 = ''内联语句"

复制代码

  <div id="app">
    <button v-on:click="count--">-</button>
    <span>{{count}}</span>
    <button v-on:click="count++">+</button>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      }
    })
  </script>

实现点击+号数字加1，点击-号数字减1

可以简写成：@事件名

@click="count++"

v-on:事件名='methods的函数名'

第二种写法实现，点击切换显示

复制代码

  <div id="app">
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">okokok</h1>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      methods: {
        fn() {
          this.isShow = !this.isShow
        }
      }
    })
  </script>

v-bind

作用:动态的设置html的标签属性

语法：v-bind:属性名="表达式"(src,title)

简写:v-bind:src可以简写成 :src

v-for

作用:基于数据循环，多次渲染整个元素

遍历数组语法:

v-for="(item,index) in 数组"

其中item是元素，index是下标

复制代码

  <div id="app">
    <ul>
      <li v-for="(item,index) in list">
        {{item}}
      </li>
    </ul>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['西瓜', '草莓', '香蕉']
      }
    })
  </script>

v-for中的key

作用：给列表项添加的唯一标识。便于Vue进行列表正确的排序复用

语法：key属性 = "唯一标识"

注意：

key的值只能是字符串或数字类型
key的值必须具有唯一性
推荐使用id作为key，不推荐使用index作为key

v-model

作用：给表单元素使用，双向数据绑定 ，可以快速获取或设置表单元素内容

数据变化，视图自动更新。视图变化，数据自动更新

语法:v-model = '变量'

复制代码

  <div id="app">
    账户:<input type="text" v-model="username"><br><br>
    密码:<input type="password" v-model="password"><br><br>
    <button @click="login">登陆</button>
    <button @click="reset">重置</button>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
      methods: {
        login() {
          console.log(this.username, this.password);

        },
        reset() {
          this.username = '',
            this.password = ''
        }
      }
    })
  </script>