Vue第二天学习

最新推荐文章于 2024-05-20 10:06:54 发布

圈外人员

最新推荐文章于 2024-05-20 10:06:54 发布

阅读量94

点赞数

分类专栏：前端学习文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/cxxc980322/article/details/131777218

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

v-else,v-else-if主要是辅助v-if做判断渲染，紧挨着v-if使用

v-on：

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

2. 语法：

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

② v-on:事件名 = "methods中的函数名"

注意：methods函数内的 this 指向 Vue 实例

<body>
  <div id="app">
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">黑马程序员</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app4 = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      methods: {
        fn () {
          // 让提供的所有methods中的函数，this都指向当前实例
          // console.log('执行了fn', app.isShow)
          // console.log(app3 === this)
          this.isShow = !this.isShow
        }
      }
    })
  </script>

Vue 指令 v-on 调用传参

<body>

  <div id="app">
    <div class="box">
      <h3>小黑自动售货机</h3>
      <button @click="buy(5)">可乐5元</button>
      <button @click="buy(10)">咖啡10元</button>
      <button @click="buy(8)">牛奶8元</button>
      <button @click="buy(4)">雪碧4元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 100
      },
      methods: {
        buy (price) {
          this.money -= price
        }
      }
    })
  </script>

Vue 指令 v-bind

1. 作用： 动态的设置html的标签属性 → src url title ...

2. 语法： v-bind :属性名 ="表达式"

3. 注意： 简写形式 :属性名="表达式

<body>
  <div id="app">
    <!-- v-bind:src   =>   :src -->
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    <img :src="imgUrl" :title="msg" alt="">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-02.png',
        msg: 'hello 波仔'
      }
    })

  </script>

圈外人员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue第二天学习

② v-on:事件名 = "methods中的函数名"① v-on:事件名 = "内联语句"= 添加监听 + 提供处理逻辑。Vue 指令 v-on 调用传参。注意：methods函数内的。this 指向 Vue 实例。Vue 指令 v-bind。动态的设置html的。
复制链接

扫一扫