# 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：

- v-text（类似innerText）
- - 使用语法：`<p v-text="uname">hello</p>`，意思是将 uame 值渲染到 p 标签中
  - 类似 innerText，使用该语法，会覆盖 p 标签原有内容
- v-html（类似 innerHTML）
- - 使用语法：`<p v-html="intro">hello</p>`，意思是将 intro 值渲染到 p 标签中
  - 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
  - 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来

```js
<div id="app">
  <h2>个人信息</h2>
  <p v-text="uname">姓名：</p> 
  <p v-html="intro">简介：</p>
</div>

# 条件渲染指令

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

## v-show

- 作用：  控制元素显示隐藏
- 语法：  v-show = "表达式"   表达式值为 true 显示， false 隐藏
- 原理：  切换 display:none 控制显示隐藏
- 场景：频繁切换显示隐藏的场景

## v-if

- 作用：  控制元素显示隐藏（条件渲染）
- 语法：  v-if= "表达式"          表达式值 true显示， false 隐藏
- 原理：  基于条件判断，是否创建 或 移除元素节点
- 场景：  要么显示，要么隐藏，不频繁切换的场景

## v-else 和 v-else-if

- 作用：辅助v-if进行判断渲染
- 语法：v-else  v-else-if="表达式"
- 需要紧接着v-if使用

# 事件绑定指令

使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

- `<button v-on:事件名="内联语句">按钮</button>`
- `<button v-on:事件名="处理函数">按钮</button>`
- `<button v-on:事件名="处理函数(实参)">按钮</button>`
- `v-on:`可简写为 **@**

```js
<div id="app">
  <button @click="count--">-</button>
  <button v-on:click="count++">+</button>
  <button v-on:click="add()">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      count: 100
    }
    methods:{
      add(){
      //对应业务
      }
    }
  })
</script>
```

# 属性绑定指令

- **作用：**动态设置html的标签属性 比如：src、url、title
- **语法**：**v-bind:**属性名=“表达式”
- **v-bind:**可以简写成 =>   **`:`**

比如，有一个图片，它的 `src` 属性值，是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

- `<img v-bind:src="url" />`
- `<img :src="url" />`

```js
<div id="app">
  <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
  <img :src="imgUrl" :title="msg" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      imgUrl: './1.png',
      msg: 'hello '
    }
  })
</script>
```

### 控制样式

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 **class 类名** 和 **style 行内样式** 进行控制 。

```html
<div> :class = "对象/数组">这是一个div</div>
```

当class动态绑定的是**对象**时，**键就是类名，值就是布尔值**，如果值是**true**，就有这个类，否则没有这个类,    适用一个类名，来回切换

```html
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
```

当class动态绑定的是**数组**时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表，可用于批量添加或删除类

```html
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
```

对有样式控制的增强

```html
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
```

```vue
<div id="app">
	
	<div class="progress">
		
		<div class="inner" :style="{ width: percent + '%' }">
			<span>{{ percent }}%</span>
		</div>
	</div>
	<button @click="percent = 25">设置25%</button>
	<button @click="percent = 50">设置50%</button>
	<button @click="percent = 75">设置75%</button>
	<button @click="percent = 100">设置100%</button>
</div>
```

# 列表渲染指令

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 `(item, index) in arr` 形式的特殊语法，其中：

- item 是数组中的每一项
- index 是每一项的索引，不需要可以省略
- arr 是被遍历的数组

```js
<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>
```

给列表项添加的**唯一标识**。便于Vue进行列表项的**正确排序复用**。

Vue 的默认行为会尝试原地修改元素（**就地复用**）,加key可避免

key 的值只能是字符串 或 数字类型，且值必须具有唯一性

# 双向绑定指令

数据改变后，呈现的页面结果会更新

页面结果更新后，数据也会随之而变

- **作用：** 给**表单元素**（input、radio、select）使用，双向绑定数据，可以快速 **获取** 或 **设置** 表单元素内容
- **语法：**v-model="变量"

![](https://cdn.domye.top/uploads/08/1754533846.webp)

```js
<div id="app">
  账户：<input type="text" v-model="username"> <br><br>
  密码：<input type="password" v-model="password"> <br><br>
  <button>登录</button>
  <button>重置</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      username: '',
      password: ''
    },
  })
</script>
```

# 指令修饰

## 按键修饰符

- @keyup.enter  —>当点击enter键的时候才触发

## v-model修饰符

- v-model.trim  —>去除首位空格
- v-model.number —>转数字

## 事件修饰符

- @事件名.stop —> 阻止冒泡
- @事件名.prevent  —>阻止默认行为
- @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为

# ref和$refs

在 Vue.js 2 中，**`ref`** 和 **`$refs`** 是用于直接访问 DOM 元素或子组件实例的特殊属性。它们提供了一种**脱离响应式系统**的直接操作方式，适用于需要手动控制 DOM 或调用子组件方法的场景。

## ref 属性

- **作用**：在模板中标记一个 DOM 元素或子组件，Vue 会将其引用注册到 `$refs` 对象中。
- **语法**：

```

<div ref="myDiv">Hello</div>

<child-component ref="myChild"></child-component>
```

## $refs

- **作用**：通过 `this.$refs` 访问所有被 `ref` 标记的元素或组件实例。
- 特性：
  - 非响应式（修改 `ref` 不会触发视图更新）。
  - 仅在组件渲染完成后填充（避免在 `created` 生命周期中访问）。

## 访问 DOM 元素

```html
<template>
  <input ref="myInput" type="text" />
  <button @click="focusInput">聚焦输入框</button>
</template>

## 调用子组件方法

```html
<template>
  <child-component ref="childRef" />
  <button @click="callChildMethod">触发子组件方法</button>
</template>

# computed计算属性

在 Vue.js 2 中，**计算属性（Computed Properties）** 是一种声明式的属性，用于基于组件数据（`data`）动态计算并返回新值。它们具有缓存机制，能高效处理依赖数据变化时的复杂逻辑

## 核心特点

1. **声明式依赖追踪** 自动追踪响应式依赖（如 `data` 中的属性），依赖变化时自动重新计算。
2. **缓存机制** 依赖未变化时，直接返回缓存结果，避免重复计算（**性能优势**）。
3. **响应式更新** 计算结果也是响应式的，可触发视图更新。
4. **代码简洁** 将复杂逻辑抽取为属性，模板更清晰。

## 基本用法

在 Vue 组件中定义 `computed` 选项：

```js
new Vue({
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    // 计算属性：全名
    fullName() {
      return this.firstName + ' ' + this.lastName; 
    }
  }
})
```

模板中像普通属性一样使用：

```html
<p>全名：{{ fullName }}</p> 

```

## 高级用法

计算属性默认的简写，只能读取访问，不能 "修改"

如果要 "修改"  → 需要写计算属性的完整写法

计算属性默认只有 getter，但可提供 setter 实现双向绑定：

![](https://cdn.domye.top/uploads/08/1754560435.webp)

```js
computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    set(newValue) {
      // 当执行 this.fullName = "李 四" 时触发
      const names = newValue.split(' ');
      this.firstName = names;
      this.lastName = names || '';
    }
  }
}
```

# watch侦听器

**侦听器（Watch）** 用于监听响应式数据的变化，并在变化时执行特定的逻辑（如异步操作、复杂计算或副作用处理）。与计算属性（`computed`）不同，`watch` 更适用于**响应数据变化执行操作**的场景，而非派生新数据

## 核心特点

1. **监听数据变化** 可监听 `data`、`computed` 或 `props` 中的属性，变化时触发回调。
2. **执行异步操作** 适合处理需要等待 API 返回、定时任务等异步逻辑。
3. **精细化控制** 支持深度监听（`deep`）、立即触发（`immediate`）等配置。
4. **副作用处理** 适用于数据变化时需要修改其他数据或触发外部操作的情况。

## 基本用法

在 Vue 组件的 `watch` 选项中定义侦听器：

```js
Vue({
  data() {
    return {
      count: 0,
      user: {
        name: '张三',
        age: 25
      }
    };
  },
  watch: {
    // 监听基本数据类型
    count(newVal, oldVal) {
      console.log(`count变化：从${oldVal}变为${newVal}`);
    },
    
    // 监听对象属性（需用字符串路径）
    'user.name'(newName) {
      console.log('用户名变为：', newName);
    }
  }
});
```

## 高级配置

通过对象语法配置侦听器的行为：

```js
watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('user对象变化', newVal);
    },
    deep: true,      // 深度监听对象内部变化
    immediate: true  // 立即触发一次回调（初始值）
  }
}
```

## **为什么需要深度监听？**

当监听一个**对象**或**数组**时，如果直接修改其内部属性（如 `obj.key = newValue` 或 `arr = 1`），由于对象/数组的引用地址未变，浅层监听**不会触发回调**。此时需要通过 `deep: true` 启用深度监听

假设有一个嵌套对象 `user`：

```js
data() {
  return {
    user: {
      name: '张三',
      address: {
        city: '北京'
      }
    }
  };
}
```

### 默认浅层监听（不生效）

```js
JavaScriptwatch: {
  user(newVal, oldVal) {
    console.log('user变化', newVal); 
    // 仅当 this.user = {...} 整体替换时触发
  }
}
```

- ❌ 以下操作**不会触发**侦听器：

```js
this.user.name = '李四';       // 修改属性
this.user.address.city = '上海'; // 修改嵌套属性
```

### 启用深度监听（生效）

```js
watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('user变化', newVal);
      // 任何嵌套属性修改都会触发
    },
    deep: true  // 关键配置
  }
}
```

- ✅ 以下操作**会触发**侦听器：

```js
this.user.name = '李四';       // 触发
this.user.address.city = '上海'; // 触发
this.user = { name: '王五' };   // 触发（整体替换）
```

内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：

v-text（类似innerText）
- 使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中
- 类似 innerText，使用该语法，会覆盖 p 标签原有内容
v-html（类似 innerHTML）
- 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
- 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
- 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来

<div id="app">
  <h2>个人信息</h2>
  <p v-text="uname">姓名：</p> 
  <p v-html="intro">简介：</p>
</div> 

<script>
        const app = new Vue({
            el:'#app',
            data:{
                uname:'张三',
                intro:'<h2>这是一个<strong>非常优秀</strong>的boy<h2>'
            }
        })
</script>

条件渲染指令

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

v-show

作用：控制元素显示隐藏
语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
原理：切换 display:none 控制显示隐藏
场景：频繁切换显示隐藏的场景

v-if

作用：控制元素显示隐藏（条件渲染）
语法： v-if= "表达式" 表达式值 true显示， false 隐藏
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换的场景

v-else 和 v-else-if

作用：辅助v-if进行判断渲染
语法：v-else v-else-if="表达式"
需要紧接着v-if使用

事件绑定指令

使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

<button v-on:事件名="内联语句">按钮</button>
<button v-on:事件名="处理函数">按钮</button>
<button v-on:事件名="处理函数(实参)">按钮</button>
v-on:可简写为 @

<div id="app">
  <button @click="count--">-</button>
  <button v-on:click="count++">+</button>
  <button v-on:click="add()">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      count: 100
    }
    methods:{
      add(){
      //对应业务
      }
    }
  })
</script>

属性绑定指令

作用：动态设置html的标签属性比如：src、url、title
语法：v-bind:属性名=“表达式”
v-bind:可以简写成 => :

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

<img v-bind:src="url" />
<img :src="url" />

<div id="app">
  <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
  <img :src="imgUrl" :title="msg" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      imgUrl: './1.png',
      msg: 'hello '
    }
  })
</script>

控制样式

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制。

<div> :class = "对象/数组">这是一个div</div>

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类, 适用一个类名，来回切换

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表，可用于批量添加或删除类

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

对有样式控制的增强

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

<div id="app">
    <!-- 外层盒子底色 （黑色） -->
    <div class="progress">
        <!-- 内层盒子 - 进度（蓝色） -->
        <div class="inner" :style="{ width: percent + '%' }">
            <span>{{ percent }}%</span>
        </div>
    </div>
    <button @click="percent = 25">设置25%</button>
    <button @click="percent = 50">设置50%</button>
    <button @click="percent = 75">设置75%</button>
    <button @click="percent = 100">设置100%</button>
</div>

列表渲染指令

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

item 是数组中的每一项
index 是每一项的索引，不需要可以省略
arr 是被遍历的数组

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>

给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

Vue 的默认行为会尝试原地修改元素（就地复用）,加key可避免

key 的值只能是字符串或数字类型，且值必须具有唯一性

双向绑定指令

数据改变后，呈现的页面结果会更新

页面结果更新后，数据也会随之而变

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速获取或设置表单元素内容
语法：v-model="变量"

<div id="app">
  账户：<input type="text" v-model="username"> <br><br>
  密码：<input type="password" v-model="password"> <br><br>
  <button>登录</button>
  <button>重置</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      username: '',
      password: ''
    },
  })
</script>

指令修饰

按键修饰符

@keyup.enter —>当点击enter键的时候才触发

v-model修饰符

v-model.trim —>去除首位空格
v-model.number —>转数字

事件修饰符

@事件名.stop —> 阻止冒泡
@事件名.prevent —>阻止默认行为
@事件名.stop.prevent —>可以连用即阻止事件冒泡也阻止默认行为

ref和$refs

在 Vue.js 2 中，ref 和 $refs 是用于直接访问 DOM 元素或子组件实例的特殊属性。它们提供了一种脱离响应式系统的直接操作方式，适用于需要手动控制 DOM 或调用子组件方法的场景。

ref 属性

作用：在模板中标记一个 DOM 元素或子组件，Vue 会将其引用注册到 $refs 对象中。
语法：

<!-- 标记DOM元素 -->
<div ref="myDiv">Hello</div>

<!-- 标记子组件 -->
<child-component ref="myChild"></child-component>

$refs

作用：通过 this.$refs 访问所有被 ref 标记的元素或组件实例。
特性：
- 非响应式（修改 ref 不会触发视图更新）。
- 仅在组件渲染完成后填充（避免在 created 生命周期中访问）。

访问 DOM 元素

<template>
  <input ref="myInput" type="text" />
  <button @click="focusInput">聚焦输入框</button>
</template>

<script>
export default {
  methods: {
    focusInput() {
      // 通过 $refs 访问DOM元素并调用原生方法
      this.$refs.myInput.focus();
    }
  }
};
</script>

调用子组件方法

<template>
  <child-component ref="childRef" />
  <button @click="callChildMethod">触发子组件方法</button>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      // 通过 $refs 访问子组件实例
      this.$refs.childRef.someMethod();
    }
  }
};
</script>

computed计算属性

在 Vue.js 2 中，计算属性（Computed Properties） 是一种声明式的属性，用于基于组件数据（data）动态计算并返回新值。它们具有缓存机制，能高效处理依赖数据变化时的复杂逻辑

核心特点

声明式依赖追踪 自动追踪响应式依赖（如 data 中的属性），依赖变化时自动重新计算。
缓存机制 依赖未变化时，直接返回缓存结果，避免重复计算（性能优势）。
响应式更新 计算结果也是响应式的，可触发视图更新。
代码简洁 将复杂逻辑抽取为属性，模板更清晰。

基本用法

在 Vue 组件中定义 computed 选项：

new Vue({
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    // 计算属性：全名
    fullName() {
      return this.firstName + ' ' + this.lastName; 
    }
  }
})

模板中像普通属性一样使用：

<p>全名：{{ fullName }}</p> 
<!-- 输出：全名：张 三 -->

高级用法

计算属性默认的简写，只能读取访问，不能 "修改"

如果要 "修改" → 需要写计算属性的完整写法

计算属性默认只有 getter，但可提供 setter 实现双向绑定：

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    set(newValue) {
      // 当执行 this.fullName = "李 四" 时触发
      const names = newValue.split(' ');
      this.firstName = names;
      this.lastName = names || '';
    }
  }
}

watch侦听器

侦听器（Watch） 用于监听响应式数据的变化，并在变化时执行特定的逻辑（如异步操作、复杂计算或副作用处理）。与计算属性（computed）不同，watch 更适用于响应数据变化执行操作的场景，而非派生新数据

核心特点

监听数据变化 可监听 data、computed 或 props 中的属性，变化时触发回调。
执行异步操作 适合处理需要等待 API 返回、定时任务等异步逻辑。
精细化控制 支持深度监听（deep）、立即触发（immediate）等配置。
副作用处理 适用于数据变化时需要修改其他数据或触发外部操作的情况。

基本用法

在 Vue 组件的 watch 选项中定义侦听器：

Vue({
  data() {
    return {
      count: 0,
      user: {
        name: '张三',
        age: 25
      }
    };
  },
  watch: {
    // 监听基本数据类型
    count(newVal, oldVal) {
      console.log(`count变化：从${oldVal}变为${newVal}`);
    },
    
    // 监听对象属性（需用字符串路径）
    'user.name'(newName) {
      console.log('用户名变为：', newName);
    }
  }
});

高级配置

通过对象语法配置侦听器的行为：

watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('user对象变化', newVal);
    },
    deep: true,      // 深度监听对象内部变化
    immediate: true  // 立即触发一次回调（初始值）
  }
}

为什么需要深度监听？

当监听一个对象或数组时，如果直接修改其内部属性（如 obj.key = newValue 或 arr = 1），由于对象/数组的引用地址未变，浅层监听不会触发回调。此时需要通过 deep: true 启用深度监听

假设有一个嵌套对象 user：

data() {
  return {
    user: {
      name: '张三',
      address: {
        city: '北京'
      }
    }
  };
}

默认浅层监听（不生效）

JavaScriptwatch: {
  user(newVal, oldVal) {
    console.log('user变化', newVal); 
    // 仅当 this.user = {...} 整体替换时触发
  }
}

❌ 以下操作不会触发侦听器：

this.user.name = '李四';       // 修改属性
this.user.address.city = '上海'; // 修改嵌套属性

启用深度监听（生效）

watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('user变化', newVal);
      // 任何嵌套属性修改都会触发
    },
    deep: true  // 关键配置
  }
}

✅ 以下操作会触发侦听器：

this.user.name = '李四';       // 触发
this.user.address.city = '上海'; // 触发
this.user = { name: '王五' };   // 触发（整体替换）

最后修改：2025 年 08 月 07 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

2 条评论

鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 搜狗浏览器 2.X Windows 10 中国北京新国信通信有限公司 CN AS
发送于 2025年11月9日 01:15

果博东方客服开户联系方式【182-8836-2750—】?薇- cxs20250806】
果博东方公司客服电话联系方式【182-8836-2750—】?薇- cxs20250806】
果博东方开户流程【182-8836-2750—】?薇- cxs20250806】
果博东方客服怎么联系【182-8836-2750—】?薇- cxs20250806】

回复
dsbsaubfwi 搜狗浏览器 2.X Windows 10 亚太地区
发送于 2025年10月7日 09:10

2025年10月新盘做第一批吃螃蟹的人coinsrore.com
新车新盘嘎嘎稳嘎嘎靠谱coinsrore.com
新车首发，新的一年，只带想赚米的人coinsrore.com
新盘上车集合留下我要发发立马进裙coinsrore.com
做了几十年的项目我总结了最好的一个盘（纯干货）coinsrore.com
新车上路，只带前10个人coinsrore.com
新盘首开新盘首开征召客户！！！coinsrore.com
新项目准备上线，寻找志同道合的合作伙伴coinsrore.com
新车即将上线真正的项目，期待你的参与coinsrore.com
新盘新项目，不再等待，现在就是最佳上车机会！coinsrore.com
新盘新盘这个月刚上新盘新车第一个吃螃蟹！coinsrore.com

回复