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>
相关推荐
baiduopenmap8 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish16 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull20 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i28 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_31 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun37 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜40 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html