整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
Vue.js 的核心是一個(gè)允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)：
<div id="app">
{{ msg }}
</div>
//實(shí)例化代碼
var app = new Vue({
el: '#app',
data: {
msg: '歡迎學(xué)習(xí)Vue'
}
}){{ msg }} 為什么會(huì)變成 msg 的值？vue 使用基本 html 的模板語法，允許開發(fā)者聲明式地將DOM 綁定至底層 vue 實(shí)例的數(shù)據(jù)，所有 vue 模板都是合法的 html，所以能被遵循規(guī)范的瀏覽器和 html 解析器解析。
2.1、mustache語法
mustache 翻譯為中文，是胡子/胡須。由于 {{ msg }} 兩邊都有對(duì)稱的大括號(hào)，就像人的胡須一樣，所以就叫做 mustache 語法。
特點(diǎn)：不僅可以直接寫成變量，也可以添加簡單的表達(dá)式。
//寫法多樣，使用便捷
<h2> {{ msg }} <h2>
<h2> {{ fir+' '+sed }} <h2>
<h2> {{ fir }} {{sed}} <h2>
<h2> {{ number + 1 }} <h2>
<h2> {{ message.split('').reverse().join('') }} <h2> 2.2、v-once
上邊的數(shù)據(jù)綁定中，頁面展示 msg 的值，如果我們?cè)跒g覽器調(diào)試中，修改 msg 的值，頁面立馬會(huì)更新，始終保持最新的值為頁面內(nèi)容。
調(diào)試模式，輸入如下內(nèi)容觀察：
app.msg="你不愛我了" //回車vue 支持動(dòng)態(tài)渲染文本，在修改屬性的同時(shí)，實(shí)時(shí)渲染文本。為了提高渲染效率，只需第一次渲染出文本之后，后期屬性再修改不會(huì)影響文本內(nèi)容。
此時(shí)就需要使用 v-once 解決問題。
//使用語法
<span v-once>{{msg}}</span>特點(diǎn)：該指令后面不需要任何表達(dá)式，表示元素或組件只渲染一次，不會(huì)隨數(shù)據(jù)的改變而改變文本。
2.3、v-html
在某些特殊情況下，頁面需要?jiǎng)討B(tài)地插入一段 html 代碼，比如編輯器，動(dòng)態(tài)傳入的就是一段html 代碼，使用時(shí)我們需要原樣輸出，如：
<div>{{url}}</div>
data(){
return{
url:'<a href="http://www.baidu.com">百度首頁</a>'
}
}直接這么寫并不能滿足我們的要求，我們需要展示成帶有超鏈接的百度首頁，此時(shí) v-html 登場。
// v-html 使用語法
<div v-html="url"></div>給元素添加 v-html 指令后，元素就展示成一個(gè)帶有超鏈接的百度首頁文字。
v-html 特點(diǎn)：可以解析字段內(nèi)的標(biāo)簽，把內(nèi)容當(dāng)作 html 標(biāo)簽來處理。
2.4、v-text
// 使用語法
<span v-text="msg"></span>特點(diǎn)：與 mustache 語法類似，用于展示文本的。使用沒有 mustache 靈活，所以使用較少。
注意點(diǎn)：<span v-text="msg">新內(nèi)容</text> 標(biāo)簽中又新增內(nèi)容時(shí)，會(huì)把原來 msg 中的內(nèi)容覆蓋掉。
2.5、v-pre
v-pre 與 html 中的 pre 標(biāo)簽有些類似，html 中的 pre 會(huì)原樣輸入空格、換行、縮進(jìn)和文本內(nèi)容。v-pre 也是原樣輸出內(nèi)容，不會(huì)解析。
// 使用語法
<div v-pre> {{ msg }} </div>
頁面直接輸出 {{ msg }}2.6、v-cloak
cloak 翻譯成中文，是斗篷。那么 v-cloak是用來干什么的呢？
html頁面運(yùn)行的時(shí)候，會(huì)閃現(xiàn) {{ msg }} ，如圖：
v-locak 就是用來解決這個(gè)問題的。
// 使用語法
<div v-cloak> {{ msg }} </div>特點(diǎn)：在 vue 解析之前，元素有 v-cloak 屬性，vue 解析之后，元素沒有 v-cloak 屬性。
利用 v-cloak 的特點(diǎn)，我們?cè)?css 中添加
[v-cloak]{
display:'none'
}此時(shí)再運(yùn)行網(wǎng)頁的時(shí)候，解析之前會(huì)被隱藏掉，解析之后才展示內(nèi)容，就不會(huì)再閃現(xiàn) {{msg}}。
話不多說，看圖！
本篇文章介紹 Vue3 + vite +TS 項(xiàng)目內(nèi)使用 Echarts 5 繪制中國地圖，標(biāo)記分布點(diǎn)！之前沒有接觸過 Echarts 的，可以先去官方示例看看，里面圖形特別齊全。但是官方文檔看著費(fèi)勁的，太多了根本記不住，所以自己做個(gè)總結(jié)，下次就可以直接使用了，不用做重復(fù)無用功。
Echarts 已更新到了 5.0 版本，安裝完記得檢查下自己的版本是否是 5.0 。
npm install echarts --save安裝完成之后，在 package.json 中檢查是否安裝成功？
可以下載中國以及各個(gè)省份地圖數(shù)據(jù)。免費(fèi)的文件下載地址：
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
記得收藏哦！免得浪費(fèi)加班時(shí)間。
引入 echarts 可以全局引入：
import * as echarts from "echarts"
/* 之前vue2 */
Vue.prototype.$ecahrt = echarts
/* vue3 */
app.config.globalProperties.$echarts = echarts也可以直接在繪制頁面內(nèi)按需引用。
引入需要繪制的地圖數(shù)據(jù) json 或 js 文件，本文使用的是 json 格式：
import chinaJSON from '../../assets/json/china.json'注意：引入的時(shí)候先引入 echarts ，后引入 chinaJSON 文件，順序不能反哦！
template 部分代碼：
<template>
<div>
<div
ref="chinaMap"
style="height: 700px;border: solid 1px red;width: 100%;background: #010111;"
>
地圖1
</div>
</div>
</template>script 部分代碼：
<script lang="ts" setup>
import * as echarts from 'echarts'
import chinaJSON from '../../assets/json/china.json'
import { onMounted, ref } from 'vue'
const chinaMap = ref()
onMounted(() => {
drawChina()
})
let regions = [
{
name: '新疆維吾爾自治區(qū)',
itemStyle: {
areaColor: '#374ba4',
opacity: 1,
},
},
{
name: '四川省',
itemStyle: {
areaColor: '#fe9b45',
opacity: 1,
},
},
{
name: '陜西省',
itemStyle: {
areaColor: '#fd691b',
opacity: 1,
},
},
{
name: '黑龍江省',
itemStyle: {
areaColor: '#ffc556',
opacity: 1,
},
},
]
let scatter = [
{ name: '北京烤鴨', value: [116.46122, 39.97886, 9] },
{ name: '蘭州拉面', value: [103.86615, 36.040129, 9] },
{ name: '新疆烤肉', value: [87.613228, 43.810394, 9] },
{ name: '長沙臭豆腐', value: [112.915204, 28.207735, 9] },
{ name: '西安肉夾饃', value: [108.953445, 34.288842, 9] },
{ name: '云南', value: [102.710002, 25.045806, 9] },
]
function drawChina() {
var myChart = echarts.init(chinaMap.value)
echarts.registerMap('china', chinaJSON) //注冊(cè)可用的地圖
var option = {
geo: {
map: 'china',
roam: true, //是否允許縮放，拖拽
zoom: 1, //初始化大小
//縮放大小限制
scaleLimit: {
min: 1, //最小
max: 2, //最大
},
//設(shè)置中心點(diǎn)
center: [115.97, 29.71],
//省份地圖添加背景
regions: regions,
itemStyle: {
areaColor: '#0b122e',
color: 'red',
borderColor: '#232652',
borderWidth: 2,
},
//高亮狀態(tài)
emphasis: {
itemStyle: {
areaColor: '#1af9e5',
color: '#fff',
},
},
},
//配置屬性
series: {
type: 'effectScatter',
coordinateSystem: 'geo',
data: scatter,
showEffectOn: 'render',
rippleEffect: {
//漣漪特效相關(guān)配置
brushType: 'stroke', //波紋的繪制方式，可選 'stroke' 和 'fill'
},
hoverAnimation: true, //是否開啟鼠標(biāo) hover 的提示動(dòng)畫效果
label: {
//圖形上的文本標(biāo)簽，可用于說明圖形的一些數(shù)據(jù)信息，比如值，名稱等，
normal: {
formatter: '{b}',
position: 'right',
show: true,
},
},
itemStyle: {
//圖形樣式，normal 是圖形在默認(rèn)狀態(tài)下的樣式；emphasis 是圖形在高亮狀態(tài)下的樣式，比如在鼠標(biāo)懸浮或者圖例聯(lián)動(dòng)高亮?xí)r
normal: {
color: '#ffffff', //散點(diǎn)的顏色
shadowBlur: 10,
shadowColor: 20,
fontSize: '12px',
},
},
zlevel: 1,
},
}
myChart.setOption(option)
}
</script>想看更多的可以去官方文檔：
https://echarts.apache.org/zh/option.html#geo.regions.emphasis.itemStyle
013年，在Google工作的尤雨溪，開發(fā)出了一款輕量Javascript框架，最初命名為Seed，同年12月，更名為Vue，一經(jīng)推出發(fā)展迅速，如今已成為最時(shí)髦和炙手可熱前端框架，在Github上獲得了超過十萬的Star，國內(nèi)許多知名公司都使用Vue作為前端開發(fā)工具，例如餓了么、美團(tuán)等，很多公司的招聘要求都會(huì)把會(huì)使用vue作為加分項(xiàng)。
Vue的作者 - 尤雨溪
001-Vue的定位是什么？
Vue是一個(gè)JavaScript框架，類似的框架有React，Angular等等，所謂框架就是一個(gè)比較大型的庫，使用它能讓基于網(wǎng)頁的前端應(yīng)用程序開發(fā)起來更加方便。相對(duì)于完全采用原生JavaScript代碼來編寫前端代碼而言，使用框架的代碼量更少，開發(fā)效率也更高。
需要注意的是，Vue并非UI框架，它的定位與Bootstrap、Frozen UI這一類專注于頁面呈現(xiàn)的框架不是一回事，或者說，UI框架關(guān)注點(diǎn)在HTML，而Vue這一類框架關(guān)注點(diǎn)是JavaScript。Vue可以跟很多UI框架搭配使用，比如說Bootstrap（vueBootstrap），和一些專門與Vue配合的例如餓了嗎團(tuán)隊(duì)開發(fā)的element-ui等等。
002-實(shí)現(xiàn)第一個(gè)VueJS應(yīng)用.html
1.下載Vue: https://unpkg.com/vue/dist/vue.js
2.將vue.js拷貝到任意一個(gè)目錄（工作目錄）
3.在同一個(gè)目錄下用編輯軟件（隨便什么都行，記事本都可以）新建一個(gè)文件，輸入以下代碼：
<script src="vue.js"></script>
<div id="app">
<p>{{title}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
title: "Hello World!"
}
});
<script src="vue.js"></script>
<div id="app">
<input type="text" v-on:input="changeTitle">
<p>{{title}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
title: "Hello World!"
},
methods: {
changeTitle:function (event) {
this.title = event.target.value;
}
}
});
</script> <script src="vue.js"></script>
<div id="app">
<!-- 注意此處并沒有調(diào)用Vue模板，而是調(diào)用了一個(gè)函數(shù) -->
<p>{{sayHello()}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
title: "Hello World!"
},
methods: {
//此處sayHello是一個(gè)方法（函數(shù)），但它返回的內(nèi)容被傳送到模版里去了
sayHello:function (event) {
return 'Hello!';
}
}
});
</script> <script src="vue.js"></script>
<div id="app">
<p>{{sayHello()}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
title: "Hello World!"
},
methods: {
sayHello:function (event) {
//注意此處，return的是Hello World!
//原生的JS是不允許這么調(diào)用的，Vue在中間層做了調(diào)劑
return this.title;
}
}
});
</script> <script src="vue.js"></script>
<div id="app">
<!-- 注意：此處不能用<a href="{{link}}"> 這種形式來傳遞超鏈接值，只能用v-bind綁定并設(shè)置href的值 -->
<p>{{sayHello()}} - <a v-bind:href="link">Baidu</a> </p>
</div>
<script>
new Vue({
el: "#app",
data: {
title: "Hello World!",
link:"http://baidu.com"
},
methods: {
sayHello:function () {
return this.title;
}
}
});
</script>
<script src="vue.js"></script>
<div id="app">
<!-- 注意此處的v-once -->
<h1 v-once>{{title}}</h1>
<p>{{sayHello()}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
title: "Hello World!",
},
methods: {
sayHello:function () {
this.title = 'Hello';
return this.title;
}
}
});
</script><script src="vue.js"></script>
<div id="app">
<!-- 注意此處的v-once -->
<h1 v-once>{{title}}</h1>
<p>{{sayHello()}}</p>
<!-- 注意：v-html指令讓finishedLink以渲染后的HTML格式輸出，而不是純文本
如果以花括號(hào){{finishedLink}} 來表示的話，將會(huì)是一個(gè)HTML形式的純文本。
-->
<p v-html = "finishedLink" ></p>
</div>
<script>
new Vue({
el: "#app",
data: {
title: "Hello World!",
finishedLink:'<a href="http://baidu.com">Baidu.com</a>',
},
methods: {
sayHello:function () {
this.title = 'Hello';
return this.title;
}
}
});
</script><script src="vue.js"></script>
<div id="app">
<p>I am {{name}}</h1>
<p>I am {{age}} years old.</p>
</div>
<script>
new Vue({
el: "#app",
data: {
name: "Rockage",
age: "40",
}
});
</script><script src="vue.js"></script>
<div id="app">
<p>I am {{name}}</p>
<p>I am {{age * 3}} years old.</p>
</div>
<script>
new Vue({
el: "#app",
data: {
name: "Rockage",
age: "40",
}
});
</script><script src="vue.js"></script>
<div id="app">
<p>The Random Number is : {{sayRnd()}}</p>
</div>
<script>
new Vue({
el: "#app",
methods: {
sayRnd: function () {
// random_number = Math.random(); // 產(chǎn)生一個(gè)0到1的隨機(jī)數(shù)
// random_number = random_number.toFixed(2) //保留兩位小數(shù)
// 產(chǎn)生一個(gè)1到100的隨機(jī)數(shù)
random_number = Math.floor(Math.random() * (100 - 1 + 1)) + 1
return random_number;
}
}
});
</script><script src="vue.js" xmlns:v-bind="http://www.w3.org/1999/xhtml"></script>
<div id="app">
<img v-bind:src = "url">
</div>
<script>
new Vue({
el: "#app",
data: {
url: "http://img.mp.itc.cn/upload/20170217/1f650c2645c541ad8cc70842d7d0bbe5_th.jpeg"
}
});
</script><script src="vue.js" xmlns:v-bind="http://www.w3.org/1999/xhtml"></script>
<div id="app">
Name <input type = "text" v-bind:value = "default_name" />
</div>
<script>
new Vue({
el: "#app",
data: {
default_name: "Hua Yang"
}
});
</script><script src="vue.js"></script>
<div id="app">
<button v-on:click="increase">Click Me</button>
<p>{{ counter}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
counter: 0,
x: 0,
y: 0
},
methods: {
increase: function () {
this.counter++;
}
},
});
</script><script src="vue.js"></script>
<div id="app">
<p v-on:mousemove="updateCoordinates">Coordonates : {{x}}/{{y}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
counter: 0,
x: 0,
y: 0
},
methods: {
updateCoordinates: function (event) {
this.x = event.clientX;
this.y = event.clientY;
}
},
});
</script><script src="vue.js"></script>
<div id="app">
<!--
請(qǐng)注意, 調(diào)用increase時(shí)增加了兩個(gè)參數(shù)
-->
<button v-on:click="increase(2,$event)">Click Me</button>
<p>{{ counter}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
counter: 0,
x: 0,
y: 0
},
methods: {
// increase 函數(shù)用step和event接收參數(shù)
increase: function (step,event) {
this.counter += step;
}
},
});
</script>HTML部分：
<span v-on:mousemove = "dummy">DEAD SPOT</span>JS部分：
dummy: function(){
event.stopPropagation();
} 以上代碼確保事件不會(huì)傳播給綁定有這個(gè)屬性的SPAN上，當(dāng)然，我們還有更簡單的方法，就是使用事件修飾符，使用stop修飾符即可實(shí)現(xiàn)這個(gè)目的：
<script src="vue.js"></script>
<div id="app">
<p v-on:mousemove="updateCoordinates">Coordonates : {{x}}/{{y}}
<!-- 請(qǐng)注意下面這個(gè)SPAN綁定的事件mousemove
采用了.stop修飾符，表示此元素的mousemove事件不做任何處理
-->
- <span v-on:mousemove.stop = "">DEAD SPOT</span>
</p>
</div>
<script>
new Vue({
el: "#app",
data: {
counter: 0,
x: 0,
y: 0
},
methods: {
updateCoordinates: function (event) {
this.x = event.clientX;
this.y = event.clientY;
}
},
});
</script>
<script src="vue.js"></script>
<div id="app">
<input type = "text" v-on:keyup.enter="alertMe" />
</div>
<script>
new Vue({
el: "#app",
data: {
counter: 0,
x: 0,
y: 0
},
methods: {
alertMe: function () {
alert("Alert!");
}
},
});
</script>
<script src="vue.js"></script>
<div id="app">
<button v-on:click="alertMe">Show Alert</button>
</div>
<script>
new Vue({
el: "#app",
data: {
counter: 0,
x: 0,
y: 0
},
methods: {
alertMe: function () {
alert("You Clicked me!");
}
},
});
</script>
<script src="vue.js"></script>
<div id="app">
<input v-on:keydown = "myValue = $event.target.value" type="text"/>
<p>{{myValue}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
myValue: ''
}
});
</script>
<script src="vue.js"></script>
<div id="app">
<input v-on:keydown.enter = "myValue = $event.target.value" type="text"/>
<p>{{myValue}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
myValue: ''
}
});
</script>
<script src="vue.js"></script>
<div id="app">
<!-- 此處取消了事件函數(shù)，直接用counter++代替 -->
<button v-on:click="counter++">Click Me</button>
<!-- 此處直接修改模板counter的值 -->
<p>{{ counter * 2}}</p>
<!-- 此處是一個(gè)三元表達(dá)式，用以判斷counter的值 -->
<p>{{ counter * 2 > 10 ? 'Greate than 10' : 'Smaller than 10'}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
counter: 0
}
});
</script>
<script src="vue.js"></script>
<div id="app">
<input type = "text" v-model = "name">
<p>{{name}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
name: ''
}
});
</script>
<script src="vue.js"></script>
<div id="app">
<button v-on:click="counter1++">Increase Counter 1</button>
<button v-on:click="counter1--">Decrease Counter 1</button>
<button v-on:click="counter2++">Increase Counter 2</button>
<p>Counter:{{counter1}} | {{counter2}}</p>
<!-- 注意兩種調(diào)用方法是不同的 -->
<p>Counter 1 Result: {{result()}} | {{output}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
counter1: 0,
counter2: 0
},
computed: {
output: function () {
console.log('Here is Computed')
return this.counter1 > 5 ? "Greater than 5" : "Smaller than 5"
}
},
methods: {
result: function () {
console.log('Here is Methods')
return this.counter1 > 5 ? "Greater than 5" : "Smaller than 5"
}
}
});
</script>
<!-- 作業(yè)3問題：響應(yīng)式屬性 - 作業(yè)1 -->
<script src="vue.js"></script>
<div id="app">
<button v-on:click="value += 5">Add 5</button>
<button v-on:click="value += 1">Add 1</button>
<p>{{result}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
value: 0,
},
computed: {
result: function () {
return this.value == 37 ? "Done" : "Not there yet"
}
}
});
</script>
<script src="vue.js"></script>
<div id="app">
<button v-on:click="value += 5">Add 5</button>
<button v-on:click="value += 1">Add 1</button>
<p>Current Value:{{value}} </p>
<p>{{result}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
value: 0
},
computed: {
result: function () {
return this.value == 37 ? "Done" : "Not there yet"
}
},
watch: {
result: function () { //watch可以監(jiān)聽computed里的屬性
var vm = this;
setTimeout(function () {
vm.value = 0
// 但無法修改computed里定義的屬性，即如果寫成 vm.result = "XXX" 則程序會(huì)報(bào)錯(cuò)
}, 5000)
}
}
});
</script>
<style>
.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}
.red {
background-color: red;
}
}
</style>
<script src="vue.js"></script>
<div id="app">
<div
class="demo"
@click="attachRed = !attachRed"
:class="{red: attachRed}"
></div>
</div>
<script>
new Vue({
el: "#app",
data: {
attachRed: false
}
});
</script><style>
.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
<script src="vue.js"></script>
<div id="app">
<div
class="demo"
@click="attachRed = !attachRed"
:class="divClasses"
></div>
</div>
<script>
new Vue({
el: "#app",
data: {
attachRed: false
},
computed: {
divClasses: function () {
return {
red: this.attachRed,
blue: !this.attachRed
}
}
}
});
</script><!-- 033-CSS類動(dòng)態(tài)樣式-使用命名 -->
<style>
.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
</style>
<script src="vue.js"></script>
<div id="app">
<div
class="demo"
@click="attachRed = !attachRed"
:class="divClasses"
></div>
<div
class="demo"
:class="[color,{red: attachRed}]"
></div>
<hr>
<!-- 此處輸入框雙向綁定了color屬性，即鍵盤輸入的內(nèi)容會(huì)即時(shí)作為CSS類名傳到HTML中去 -->
<input type = "text" v-model = "color">
</div>
<script>
new Vue({
el: "#app",
data: {
attachRed: false,
color:'green'
//color屬性默認(rèn)為green，請(qǐng)注意由于雙向綁定的原因，green這個(gè)字符串也會(huì)同時(shí)傳遞到輸入框里
},
computed: {
divClasses: function () {
return {
red: this.attachRed,
blue: !this.attachRed
}
}
}
});
</script><div class="demo" :style="{'background-color':color}"></div>data: { color: 'grey', width: 100}<input type="text" v-model="color"><!-- 章節(jié)2課時(shí)34-動(dòng)態(tài)設(shè)置樣式（不使用CSS類） -->
<style>
.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}
</style>
<script src="vue.js"></script>
<div id="app">
<div class="demo" :style="{'background-color':color}"></div>
<div class="demo" :style="myStyle"></div>
<hr>
<input type="text" v-model="color">
<input type="text" v-model="width">
</div>
<script>
new Vue({
el: "#app",
data: {
color: 'grey',
width: 100
},
computed: {
myStyle: function () {
return {
backgroundColor: this.color,
width: this.width + 'px'
}
}
}
});
</script>*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
