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>
  • 相关阅读:
    POJ
    POJ
    HDU
    HDU
    HDU
    POJ
    HDU
    POJ
    A-meeting 2019牛客暑期多校第四场 (树的直径)
    算法与数据结构实验题 2.1 塔防
  • 原文地址:https://www.cnblogs.com/xiaowie/p/11572050.html
Copyright © 2011-2022 走看看