首页 > 其他分享 >Vue(2)——Vue指令

Vue(2)——Vue指令

时间:2024-08-26 23:24:13浏览次数:11  
标签:el Vue const app 指令 key new

目录

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/[email protected]/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>

标签:el,Vue,const,app,指令,key,new
From: https://blog.csdn.net/m0_74386799/article/details/141573408

相关文章