vue 2.9一般的な操作テクニック
1544 ワード
一:urlアドレスバーパラメータの取得
例:/placeList?id=1;
二:次のページにオブジェクトを渡す(queryパラメータ)
父亲vue
子vue
データを取得:this.$route.query.item
3:親コンポーネントから子コンポーネントへの値の転送
父亲vue
子vue
四:親要素のバブルイベントを阻止する
buttonのイベントaがトリガーされると、bイベントもトリガーされます
解決策:buttonに@clickを追加します.stop=「b」で、イベントのバブルを阻止します.
五:指定した配列オブジェクトidと同じ要素を削除する
六:オブジェクトのソート
七:数字タイプ+小数点しか入力できない
じゅんせいすう
数値タイプ+小数点
例:/placeList?id=1;
this.$route.query.id (id )
二:次のページにオブジェクトを渡す(queryパラメータ)
父亲vue
this.$router.push({
path:"/placeAdd",
query:item
});
//path query key
//path:
//query:
//item:
子vue
データを取得:this.$route.query.item
this.$route.query.item
3:親コンポーネントから子コンポーネントへの値の転送
父亲vue
/* */
/*script
*showHover */
this.$refs.chil.showHover(" ");
子vue
//
methods: {
showHover(text) {
console.log(text)
}
}
四:親要素のバブルイベントを阻止する
buttonのイベントaがトリガーされると、bイベントもトリガーされます
解決策:buttonに@clickを追加します.stop=「b」で、イベントのバブルを阻止します.
五:指定した配列オブジェクトidと同じ要素を削除する
arr.splice(arr.findIndex(item => item.id == id), 1)
六:オブジェクトのソート
//
compare(property) {
return function(obj1, obj2) {
var value1 = obj1[property];
var value2 = obj2[property];
return value1 - value2; //
};
}
七:数字タイプ+小数点しか入力できない
じゅんせいすう
onkeyup = "value=value.replace(/[^\d]/g,'')"
数値タイプ+小数点