element中的小知识

最新推荐文章于 2024-05-16 23:53:22 发布

qq_24664619

最新推荐文章于 2024-05-16 23:53:22 发布

阅读量585

点赞数

分类专栏： element 文章标签： element 购物车

本文链接：https://blog.csdn.net/qq_24664619/article/details/78548716

版权

element 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.响应式尺寸:

xs	`<768px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
sm	`≥768px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
md	`≥992px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
lg	`≥1200px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
xl	`≥1920px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—

二.数据

<template>
<div id="app">
<div>
<h1>{{ msg }}</h1>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</div>
<pre>{{ $data }}</pre>
<pre>{{ radio }}</pre>
</div>
</template>

<script>
export default {
data () {
return {
msg:'use vue 2.0',
radio: '1'
};
}
}
</script>
三.购物车会用到的小demo

<template>
<div id="app">
<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字">
</el-input-number>
<p>小计:{{totalFee}}</p>
<pre>{{$data}}</pre>
</div>

</template>
<script>
export default{
data(){
return {
num1:1,
price:2198
}
},
computed:{
totalFee(){
return this.num1*this.price;
}
},
methods:{
handleChange(value){
console.log(value);
}
}
};
</script>

四.cdn下的小demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
})
</script>
</html>