VUE参数和过滤器

张哥编程

发布于 2024-12-19 14:19:09

8430

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性，在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>参数</title>
    <script src="js/vue.min.js"></script>
  </head>
  <body>
    <!--布局-->
    <div id="param">
      <pre><a v-bind:href="url">csdn.net</a></pre>
    </div>
    <!--js-->
    <script>
      new Vue({
        el:'#param',
        data:{
          url:'http://www.csdn.net'
        }
      });
    </script>
  </body>
</html>

效果当我们单击CSDN.net的时候，

会自动跳转到 http://www.csdn.net

前端效果如下：

v-on 指令，它用于监听 DOM 事件

下面是针对字符串反转的案例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>v-on案例</title>
    <script src="js/vue.min.js"></script>
  </head>
  <body>
    <!--布局-->
    <div id="von">
      <p>{{msg}}</p>
      <button v-on:click="reverseMsg">反转字符串</button>
    </div>
    <!--js-->
    <script>
      new Vue({
        el:'#von',
        data:{
          msg:'it技术排行榜'
        },
        methods:{
          reverseMsg:function(){
            this.msg=this.msg.split('').reverse().join('')
          }
        }
      })
    </script>
  </body>
</html>

v-on指令也可以写成：

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>VUE的过滤器</title>
    <script src="js/vue.min.js"></script>
  </head>
  <body>
    <!--布局-->
    <div id="filter">
      {{message|capitalize}}
    </div>
    <!--js-->
    <script>
      new Vue({
        el:'#filter',
        data:{message:'hello Vue'},
        filters:{
          capitalize:function(value){
            if(!value)return''
            value=value.toString()
            return value.charAt(0).toUpperCase()+value.slice(1)
          }
        }
      });
    </script>
  </body>
</html>

实例对输入的字符串第一个字母转为大写：

效果如下：