vuejs （4）- 基础（1）

最新推荐文章于 2021-08-22 18:03:37 发布

一角残叶

最新推荐文章于 2021-08-22 18:03:37 发布

阅读量134

点赞数

分类专栏： # 15 - Vue 文章标签： Vue

本文链接：https://blog.csdn.net/u012292754/article/details/107848196

版权

15 - Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1 条件指令

偶尔隐藏或者显示，用 if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-if="flag">Hello Mike</div>
</div>

<script>
    var app = new Vue({
        el:'#app',
        data:{
           flag:true
        }
    })
</script>
</body>
</html>

经常隐藏或者显示，用 show

<div id="app">
    <div v-show="flag">Hello Mike</div>
</div>

2 循环指令

<div id="app">
    <table border="1">
        <tr v-for="i in num">
            <td v-for="j in i">
                {{j}} * {{i}} = {{j * i}}
            </td>

        </tr>
    </table>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            num: 9
        }
    })
</script>

在这里插入图片描述

3 处理用户输入

<div id="app">
   <div>{{message}}</div>
    <button v-on:click="reverseMessage">翻转消息</button>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:"Hello World!"
        },
        methods:{
            reverseMessage(){
                this.message = this.message.split('').reverse().join('');
            }
        }
    })
</script>

<div id="app">
   <div>{{message}}</div>
    <!--input 和 message 绑定在一起 -->
    <input type="text" v-model="message">
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:"Hello World!"
        }
    })
</script>

4 组件

<div id="app">
   <comp name="Vue"></comp>
</div>

<script>
    Vue.component('comp',{
        props:['name'],
        template:'<h1>Hello {{name}}</h1>'
    })

    var app = new Vue({
        el: '#app',
        data: {
            message:"Hello World!"
        }
    })
</script>

5 Vue 实例

<div id="app">

</div>

<script>
    var data = {a:1,b:null}

    var app = new Vue({
        el: '#app',
        data: data
    })

    console.log(data.a == app.a);
    data.a = 99;
    console.log(app.a);
    app.a=100;
    console.log(data.a);
    console.log(">>>>>>>>>>>>>>>");
    console.log(app.$el == document.getElementById("app"));
    console.log(app.$data == data);

</script>

在这里插入图片描述

6 计算属性

<div id="app">
    <div>{{reverseMessage}}</div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World!',
            copyMsg: null
        },
        methods:{

        },

        // 方法执行后会有缓存
        computed:{
            reverseMessage:{
                get(){
                    return this.message.split('').reverse().join('');
                },

                set(newVal){
                    this.copyMsg = newVal;
                }

            }
        }
    })
    
</script>

7 侦听器

<div id="app">
    <div>{{fullName}}</div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            firstName : 'zhang',
            lastName : 'san',
            fullName : 'zhang san'
        },
        watch:{
            firstName(val){
                this.fullName = val +' ' + this.lastName;
            },
            lastName(val){
                this.fullName = this.firstName + ' ' + val;
            }
        }

    })

</script>

在这里插入图片描述

更好的写法

<script>
    var app = new Vue({
        el: '#app',
        data: {
            firstName : 'zhang',
            lastName : 'san',

        },
        computed:{
            fullName(){
                return this.firstName + ' ' + this.lastName;
            }
        }

    })

</script>

8 class 与 style 绑定

<div id="app">
    <div v-bind:class="{mydiv:flag}">{{msg}}</div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg:'hello Mike',
            flag:true
        }
    })

</script>

<style>
    .mydiv{
        font-weight: bold;
        color:red;
    }
</style>

在这里插入图片描述

一角残叶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuejs （4）- 基础（1）

1 条件指令偶尔隐藏或者显示，用 if<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><bo
复制链接

扫一扫