zoukankan      html  css  js  c++  java
  • Vue指令之`v-bind`的三种用法及v-on事件指令

    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>
  • 相关阅读:
    hdu2328 Corporate Identity
    hdu1238 Substrings
    hdu4300 Clairewd’s message
    hdu3336 Count the string
    hdu2597 Simpsons’ Hidden Talents
    poj3080 Blue Jeans
    poj2752 Seek the Name, Seek the Fame
    poj2406 Power Strings
    hust1010 The Minimum Length
    hdu1358 Period
  • 原文地址:https://www.cnblogs.com/xiaowie/p/11572050.html
Copyright © 2011-2022 走看看