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>
  • 相关阅读:
    7. 输油管道问题
    6. 循环赛日程表
    4.JSP内置对象
    3.JSP
    2.CSS
    1.HTML
    5. 逆序对数
    [转]Android View.onMeasure方法的理解
    [转]android:clipToPadding和android:clipChildren
    [转]倍数提高工作效率的 Android Studio 奇技
  • 原文地址:https://www.cnblogs.com/xiaowie/p/11572050.html
Copyright © 2011-2022 走看看