Vue指令之`v-bind`的三種用法及v-on事件指令

本文轉載自查看原文 2019-09-23 14:19 900 Vue.js

v-bind：是 Vue中，提供的用於綁定屬性的指令

1. 直接使用指令`v-bind`

2. 使用簡化指令`:`

3. 在綁定的時候，拼接綁定內容：`:title="btnTitle + ', 這是追加的內容'"`

4.v-bind 中，可以寫合法的JS表達式

<input type="button" value="按鈕" v-bind:title="mytitle + '123'">


<script src="./lib/vue-2.4.0.js"></script>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        msg2: '<h1>哈哈，我是一個大大的H1， 我大，我驕傲</h1>',
        mytitle: '這是一個自己定義的title'
      },
      methods: { // 這個 methods屬性中定義了當前Vue實例所有可用的方法
        show: function () {
          alert('Hello')
        }
      }
    })

v-on: 事件綁定機制，可以簡寫@

<input type="button" value="按鈕" @click="show">
 


  <script src="./lib/vue-2.4.0.js"></script>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        msg2: '<h1>哈哈，我是一個大大的H1， 我大，我驕傲</h1>',
        mytitle: '這是一個自己定義的title'
      },
      methods: { // 這個 methods屬性中定義了當前Vue實例所有可用的方法
        show: function () {
          alert('Hello')
        }
      }
    })

v-on也可以綁定的事件也可以傳遞參數的

<body>
    <div  class="box">
        <input type="button" value="點擊" v-on:click="alterhandle('杜偉')">
    </div>
 

<script>
var vm=new new Vue({
    el:'.box',
    data:{

    },
    methods: {
        alterhandle:(ars)=>{
            alert("歡迎您"+ars)
            }
        }
    }
)

    
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 橫沖直撞vue(第三篇)：vue中template的三種寫法、v-bind、v-on、更新元素的指令v-text與v-html、條件渲染指令v-if 與v-show、v-for vue指令之-v-bind Vue v-bind指令 vue 冒號 :、@、# 是什么意思？ v-bind v-on v-slot v-是指令 Vue框架（一）——Vue導讀、Vue實例（掛載點el、數據data、過濾器filters）、Vue指令(文本指令v-text、事件指令v-on、屬性指令v-bind、表單指令v-model) Vue的常用指令v-if， v-for， v-show，v-else， v-bind， v-on vue---- v-bind指令 Vue中的v-bind指令 Vue：v-bind/v-on的縮寫 vue v-bind v-on