vue 指令与过滤器案例代码

以下是关于 Vue 指令与过滤器的详细攻略：

Vue 指令

Vue.js 中的指令是一种特殊的属性，以 v- 开头，并且会在渲染时根据一些逻辑被解析和执行。指令主要是用来操作 DOM 元素的，包括变更元素的文本内容、监听元素的事件、控制元素的显示和隐藏等等。下面是几个常用的指令示例。

v-text 指令

这个指令可以用来替代元素的 innerText 属性，并将元素的内容替换为表达式的值。

<div v-text="message"></div>

在 Vue.js 中，表达式可以包含变量、运算符、函数等等。例如：

<div id="app">
  <span v-text="message + ' world'"></span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'hello'
  }
})
</script>

这段代码会将 span 元素的内容输出为 hello world。

v-model 指令

这个指令可以将表单元素和 Vue 实例的数据进行双向绑定。例如：

<div id="app">
  <input type="text" v-model="message">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'hello'
  }
})
</script>

这段代码会将文本输入框和 message 属性的值进行双向绑定，当输入框中的值改变时，message 的值也会随之改变。

Vue 过滤器

Vue.js 中的过滤器用于对输出的文本进行处理，并将处理过的文本输出到模板中。过滤器本质上是一个函数，可以在模板表达式中调用。下面是一个示例：

自定义过滤器

Vue.js 中提供了一些内置的过滤器，例如将文本转为大写字母的 uppercase 过滤器。我们也可以自定义过滤器，比如下面的示例将输入的文本转为红色字体输出：

<div id="app">
  <p v-html="message | red"></p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  },
  filters: {
    red: function (text) {
      return '<span style="color: red">' + text + '</span>'
    }
  }
})
</script>

在这个例子中，red 过滤器接受一个文本参数，并返回一个被包裹在 span 标签中的红色文本。

连接过滤器

在实际应用中，经常需要使用多个过滤器来处理同一个字符串。Vue.js 允许我们通过管道符 | 来连接多个过滤器。例如：

<div id="app">
  <p>{{ message | uppercase | reverse }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  },
  filters: {
    uppercase: function (text) {
      return text.toUpperCase()
    },
    reverse: function (text) {
      return text.split('').reverse().join('')
    }
  }
})
</script>

在这个例子中，message 先通过 uppercase 过滤器转为大写字母，然后再通过 reverse 过滤器进行翻转输出，最终的结果为 DLROW OLLEH。

以上就是关于 Vue.js 的指令和过滤器的介绍和示例，希望对你有所帮助。