ホームページ >ウェブフロントエンド >jsチュートリアル >Vue2.0シリーズでフィルターを使用するにはどうすればよいですか?
Vue2.0シリーズでフィルターを使用するにはどうすればよいですか?
- 亚连オリジナル
- 2018-06-02 10:11:512559ブラウズ
この記事では主に Vue2.0 シリーズのフィルターの使い方を紹介しますので、参考にしてください。
vue2.0 ではフィルターが廃止され、いくつかの一般的なテキスト書式設定にはカスタム フィルターが必要です。
とても使いやすいです！ ！
フィルターは、二重中括弧補間と v-bind 式の 2 つの場所で使用できます。
フィルターは、パイプ文字で示される JavaScript 式の最後に追加する必要があります。
1. グローバル フィルターを登録します
注:
1. グローバル メソッド Vue.filter() はカスタム フィルターを登録し、フィルター関数は常に vue インスタンス化の前に配置する必要があります。式の値は最初のパラメーターとして使用され、引用符付きのパラメーターは文字列として扱われ、引用符のないパラメーターは式として計算されます
3。これら 2 つのフィルターの処理が競合しない限り、2 つのフィルター パラメーターを設定できます。 4. ユーザーが入力から入力したデータは、モデルに送信される前に処理することもできます
Case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<p id="app">
<!-- 首字符串大写 -->
<p>首字母大写过滤器：{{str | upcase}}</p>
<!-- 给过滤器传入参数 -->
<p>求和过滤器：{{message | sum(10,20)}}</p>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
//全局方法 Vue.filter()注册一个自定义过滤器,必须放在Vue实例化前面
// 注册一个首字母大写的过滤器
Vue.filter("upcase", function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
});
// 全局注册一个求和过滤器
Vue.filter('sum', function (value, a, b) {
return value + a + b;
});
var demo = new Vue({
el: "#app",
data: {
str:'hello',
message:12
}
});
</script>
</body>
</html>Case 効果:
2. インスタンス化内に登録します フィルターは次のことができますインスタンス内では、それを使用しているインスタンス内でのみ登録されます。
上記のケースから適応:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="app">
<!-- 首字符串大写 -->
<p>首字母大写过滤器：{{str | upcase}}</p>
<!-- 给过滤器传入参数 -->
<p>求和过滤器：{{message | sum(10,20)}}</p>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
var demo = new Vue({
el: "#app",
data: {
str:'hello',
message:12
},
filters: {
upcase:function(value){
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
},
sum:function(value, a, b){
return value + a + b;
}
}
});
</script>
</body>
</html>効果:
3. 共通フィルター タイムスタンプに基づいて時刻形式に変換: mm-dd hh:tt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="app">
<!-- 将时间戳转化为时间 -->
<h1>根据时间戳转化为时间：{{ str | formateTime}}</h1>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
var demo = new Vue({
el: "#app",
data: {
str:1517568434324,
},
filters: {
formateTime:function(nS){
return ((new Date(nS).getMonth()+1)<10?'0'+(new Date(nS).getMonth()+1):(new Date(nS).getMonth()+1)) + '-' + (new Date(nS).getDate()<10?'0'+new Date(nS).getDate():new Date(nS).getDate()) + ' ' + (new Date(nS).getHours()<10?'0'+new Date(nS).getHours():new Date(nS).getHours()) + ':' + (new Date(nS).getMinutes()<10?'0'+new Date(nS).getMinutes():new Date(nS).getMinutes())
}
}
});
</script>
</body>
</html>ケースの効果:
上記をあなたのためにまとめました。将来お役に立てば幸いです。
関連記事:
vue.jsのタグ属性に可変パラメータを挿入する方法について(詳細チュートリアル) Vueでコンポーネントの外側をクリックしてコンポーネントを閉じる方法について(詳細チュートリアル) 詳細は、vue ビルドがパッケージ化された後のホームページの白い画面の問題を解決します (詳細なチュートリアル)以上がVue2.0シリーズでフィルターを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。