• 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>
  • 相关阅读:
    Brackets_区间DP
    石子合并_区间Dp
    You Are the One_区间DP
    Palindrome subsequence_区间DP
    Infix to postfix 用stack模板,表达式没有括号
    Java 4
    Java 3
    规范化的递归转换成非递归
    recursion 递归以及递归的缺点
    Infix to postfix conversion 中缀表达式转换为后缀表达式
  • 原文地址:https://www.cnblogs.com/xiaowie/p/11572050.html
Copyright © 2020-2023  润新知