首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

测试开发进阶(十七)

插件推荐

推荐Vue插件:Vue.js devtools

基本操作

v-bind

代码语言:javascript
复制
<span title="dream">学好Vue</span>
代码语言:javascript
复制
<span v-bind:title="dream">学好Vue</span>
代码语言:javascript
复制
data() {
    return {
        message: 'Hello Python',
        name: 'zhongxin',
        dream: '小目标'
    }
}

可以使用插件进行修改绑定的内容

v-if和v-show

代码语言:javascript
复制
<p v-if="isNotFlag">嘟嘟嘟</p>
代码语言:javascript
复制
data() {
    return {
        message: 'Hello Python',
        name: 'zhongxin',
        dream: '小目标',
        isNotFlag: false,
    }
}

isNotFlagfalse的时候不显示,当 isNotFlagtrue的时候显示

代码语言:javascript
复制
<p v-show="isNotFlag">嘟嘟嘟2</p>

v-show也可以实现类似 v-if的效果,但是两者还是有区别的

  • v-if每次都会重新删除或创建元素
  • v-show每次不会重新进行dom的删除和创建操作,只是切换了元素的 display样式

v-if

v-else-if

v-else

代码语言:javascript
复制
<p>有一天,{{username}}想去上网</p>
<p v-if="age>=70">{{username}}爷爷,您还是回去锻炼身体吧</p>
<p v-else-if="age>=18">{{username}},欢迎光临</p>
<p v-else>{{username}},小朋友作业写完了吗?</p>
代码语言:javascript
复制
data() {
    return {
        message: 'Hello Python',
        name: 'zhongxin',
        dream: '小目标',
        isNotFlag: false,
        username: '马仔',
        age: 19,
    }
}

修改 age

v-for

代码语言:javascript
复制
<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>
代码语言:javascript
复制
<tr v-for="item in projects">
    <th>{{item.name}}</th>
    <th>{{item.leader}}</th>
    <th>{{item.app_name}}</th>
</tr>
代码语言:javascript
复制
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'},
        ]

    }
}

使用Element UI

https://element.eleme.cn/#/zh-CN/component/installation

在项目路径下安装:

代码语言:javascript
复制
$ cnpm i element-ui -S

导入:

代码语言:javascript
复制
// 导入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')

选择适合的:

代码语言:javascript
复制
<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

v-on为vue中指令,用于绑定事件,事件触发之后可以执行js操作

代码语言:javascript
复制
<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可以缩写为 @

代码语言:javascript
复制
<p @click="changeUsername">有一天,{{username}}想去上网</p>
代码语言:javascript
复制
methods: {
    changeUsername: function () {
        // this 就相当于self
        this.username = '一个没有感情的杀手'
    }
}
下一篇
举报
领券