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属性 = "唯一标识"

注意:

  1. key的值只能是字符串或数字类型
  2. key的值必须具有唯一性
  3. 推荐使用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>
相关推荐
酷酷的阿云8 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058710 分钟前
web端手机录音
前端
齐 飞15 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹32 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟10092 小时前
ffmpeg重复回听音频流,时长叠加问题
前端