推荐Vue插件:Vue.js devtools
<span title="dream">学好Vue</span>
<span v-bind:title="dream">学好Vue</span>
data() {
return {
message: 'Hello Python',
name: 'zhongxin',
dream: '小目标'
}
}
可以使用插件进行修改绑定的内容
<p v-if="isNotFlag">嘟嘟嘟</p>
data() {
return {
message: 'Hello Python',
name: 'zhongxin',
dream: '小目标',
isNotFlag: false,
}
}
当 isNotFlag
是 false
的时候不显示,当 isNotFlag
是 true
的时候显示
<p v-show="isNotFlag">嘟嘟嘟2</p>
v-show
也可以实现类似 v-if
的效果,但是两者还是有区别的
v-if
每次都会重新删除或创建元素v-show
每次不会重新进行dom的删除和创建操作,只是切换了元素的 display
样式v-if
v-else-if
v-else
<p>有一天,{{username}}想去上网</p>
<p v-if="age>=70">{{username}}爷爷,您还是回去锻炼身体吧</p>
<p v-else-if="age>=18">{{username}},欢迎光临</p>
<p v-else>{{username}},小朋友作业写完了吗?</p>
data() {
return {
message: 'Hello Python',
name: 'zhongxin',
dream: '小目标',
isNotFlag: false,
username: '马仔',
age: 19,
}
}
修改 age
<template>
<table>
<tr>
<th v-for="project in project_headers">{{project}}</th>
</tr>
</table>
</template>
<script>
export default {
name: "ProjectsList",
data() {
return {
project_headers: ['项目名称', '项目负责人', '应用名称'],
}
}
}
</script>
<style scoped>
table {
margin: 50px auto;
border-collapse: collapse;
width: 40%;
}
td, th {
border: 1px solid #ddd;
}
</style>
<tr v-for="item in projects">
<th>{{item.name}}</th>
<th>{{item.leader}}</th>
<th>{{item.app_name}}</th>
</tr>
data() {
return {
project_headers: ['项目名称', '项目负责人', '应用名称'],
projects: [
{name: '前程贷', leader: '笨笨', app_name: 'P2P'},
{name: '111', leader: '222', app_name: '333'},
{name: '444', leader: '555', app_name: '666'},
{name: '666', leader: '777', app_name: '888'},
]
}
}
https://element.eleme.cn/#/zh-CN/component/installation
在项目路径下安装:
$ cnpm i element-ui -S
导入:
// 导入Vue.js
import Vue from 'vue'
// 导入App.vue根组件
import App from './App.vue'
// 导入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//在创建Vue实例前,要将element-ui插件加入到Vue中
Vue.use(ElementUI);// 加载插件
Vue.config.productionTip = false
new Vue({
render: h => h(App), //渲染App根组件
}).$mount('#app')
选择适合的:
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
class="project_list_new"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="项目名称"
width="120">
</el-table-column>
<el-table-column
prop="leader"
label="项目负责人"
width="120">
</el-table-column>
<el-table-column
prop="app_name"
label="应用名称"
show-overflow-tooltip>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: "ProjectsList",
data() {
return {
project_headers: ['项目名称', '项目负责人', '应用名称'],
tableData: [
{name: '前程贷', leader: '笨笨', app_name: 'P2P'},
{name: '111', leader: '222', app_name: '333'},
{name: '444', leader: '555', app_name: '666'},
{name: '666', leader: '777', app_name: '888'},
]
}
}
}
</script>
<style scoped>
table {
margin: 50px auto;
border-collapse: collapse;
width: 40%;
}
td, th {
border: 1px solid #ddd;
}
.project_list_new {
margin: 50px 500px;
}
</style>
v-on为vue中指令,用于绑定事件,事件触发之后可以执行js操作
<p v-on:click="username='路人'">有一天,{{username}}想去上网</p>
<p v-if="age>=70">{{username}}爷爷,您还是回去锻炼身体吧</p>
<p v-else-if="age>=18">{{username}},欢迎光临</p>
<p v-else>{{username}},小朋友作业写完了吗?</p>
点击「有一天」后
v-on可以缩写为 @
<p @click="changeUsername">有一天,{{username}}想去上网</p>
methods: {
changeUsername: function () {
// this 就相当于self
this.username = '一个没有感情的杀手'
}
}