- '-'が付いたオブジェクト属性、名前は一重引用符で囲む必要があります
var vm = new Vue({
el: '#app',
data: {
styleObj1: {
color: 'red', 'font-weight': 200 }, // font-weight加上''
styleObj2: {
'font-style': 'italic' }
},
methods: {
}
});
- v-forを使用して、vueの数値を1から繰り返します。
<div id="app">
<!-- in 后面我们放过 普通数组，对象数组，对象， 还可以放数字 -->
<!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
<p v-for="count in 10">这是第 {
{
count }} 次循环</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
},
methods: {
}
});
</script>
- v-forループの考慮事項
<!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string -->
<!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
<!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{
{
item.id}} --- {
{
item.name}}
</p>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{
id: 1, name: '李斯' },
{
id: 2, name: '嬴政' },
{
id: 3, name: '赵高' },
{
id: 4, name: '韩非' },
{
id: 5, name: '荀子' }
]
},
methods: {
add() {
// 添加方法
this.list.unshift({
id: this.id, name: this.name })
}
}
});
</script>
アルゴリズム
1. Array.from（）は
、配列のようなオブジェクトまたはトラバース可能なオブジェクトを実際の配列の
ような配列オブジェクトに変換します。最も基本的な要件は、length属性を持つオブジェクトです。
- 配列のようなオブジェクトを実際の配列に変換します
let arrayLike = {
0: 'tom',
1: '65',
2: '男',
3: ['jane','john','Mary'],
'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]
上記のコードのlength属性を削除すると、答えは長さが0の空の配列になります。
長さプロパティのみがあり、オブジェクトプロパティ名が数値タイプでない場合、4undefinedが返されます
- 2番目のパラメーターを受け取ることができます
。mapメソッドは、各要素を処理し、処理された値を返された配列に入れるために使用される配列に似ています。
let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]
- 文字列を配列に変換します。
let str = 'hello world!';
console.log(Array.from(str))
// ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
2.配列を文字列に変換します
- array.toString（）：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
// "Banana,Orange,Apple,Mango"
注：配列内の要素はコンマで区切られます。
- array.join（ ""）
は上記と同じ効果がありますが、スペースはありません。
3. map.values
は、Mapオブジェクトに順番に挿入された各要素の値を含む新しいIteratorオブジェクトを返します。配列に変換
できArray.from(map.values())ます。
4.5
。