码迷,mamicode.com
首页 > 其他好文 > 详细

vue基础入门(2.3)

时间:2019-12-13 15:32:18      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:meta   eth   hello   color   使用   根据   性能   isa   用法   

2.3.样式绑定

2.3.1.绑定class样式

1.绑定单个class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 500px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="app">
    <div :class="classBox"></div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            classBox:'box'
        }
    });


</script>


</body>
</html>

2.绑定多个样式

<div id="app">
    <div :class="[classBox,classBox2,classBox3]"></div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            classBox:'box',
            classBox2:'box2',
            classBox3:'box3',
        }
    });   
</script>

3.可以根据值来确定是否显示某个样式

<div id="app">
    <button @click="fn">点击</button>
    <div :class="[{box:isActive},classBox2, classBox3]"></div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            classBox:'box',
            classBox2:'box2',
            classBox3:'box3',
            isActive: true
        },
        methods: {
            fn(){
                this.isActive = !this.isActive
            }
        }
    });

2.3.2.绑定style样式

1.把所有样式写到一个对象中

<div :style="{width:'100px',height:'100px',backgroundColor:'red'}"></div>

上面代码中需要注意的是css中background-color,需要去掉‘=’,然后把color首字母大写,类似的还有fontSize、marginLeft等

2.可以把样式写到data中的一个对象上,然后渲染到标签上

<div id="app">
    <div :style="styleObj"></div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            styleObj: {
                width:'100px',
                height:'100px',
                backgroundColor:'green'
            }
        }
    });

</script>

上面这种写法比较清晰,推荐把样式写到data里面

3.可以同时设置多个sytleObj

<div id="app">
    <button @click="fn">点击</button>
    <div :style="[styleObj, styleObj2, styleObj3]">hello, nodeing</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            styleObj: {
                width:'100px',
                height:'100px',
                backgroundColor:'green'
            },
            styleObj2: {
                fontSize: '20px'
            },
            styleObj3: {
                color: 'red'
            }
        }
    });

</script>

2.4.表单输入绑定

2.4.1.基础用法

1.文本

<div id="app">
    <input type="text" v-model="message" value="hahaha">
    <textarea v-model="message"></textarea>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            message:'hello nodeing'
        }
    });

</script>

注意:此时,如果再设置value是不能生效的,如果有默认值,最好在vue实例中初始化

2.单选框

<div id="app">
    <input type="radio" v-model="picked" value="男" >
    <input type="radio" v-model="picked" value="女" >
    <p>选择:{{picked}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            picked:'男'
        }
    });
</script>

3.复选框

<div id="app">
    <input type="checkbox" v-model="picked" value="vue" >
    <input type="checkbox" v-model="picked" value="react" >
    <input type="checkbox" v-model="picked" value="angular" >
    <p>选择:{{picked}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            picked:['vue']
        }
    });

</script>

4.选择框

<div id="app">
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>北京</option>
        <option>上海</option>
        <option>天津</option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            selected:''
        }
    });

</script>

2.4.2.修饰符

1.number 把默认为字符串类型的数字转化为number

<div id="app">
    <button @click="fn">点击</button>
    <input type="text" v-model.number="message">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            message:''
        },
        methods: {
            fn(){
                console.log(typeof this.message)
            }
        }
    });

</script>

2.trim 去除空格

<div id="app">
    <button @click="fn">点击</button>
    <input type="text" v-model.trim="message">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            message:''
        },
        methods: {
            fn(){
                console.log(this.message.length)
            }
        }
    });

</script>

2.5.计算属性

2.5.1.什么是计算属性?

计算属性从字面上理解,它类似属性的用法,但是却是可以计算的,通俗的说方法的调用是这样的:obj.fn(), 属性的调用是这样的:obj.name, 而计算属性从内容上可能长得像方法,但使用的时候,不加括号就可以调用,我们来看下面的例子:

<div id="app">
    <p>{{computedMessage}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            message:'hello nodeing!!!!'
        },
        computed: {
            computedMessage(){
                return this.message.split('').reverse().join('')
            }
        }
    });

</script>

2.5.2.计算属性的作用

1.使用计算属性,可以让模版中少用一些逻辑计算,便于维护

如果没有计算属性,模版中的代码是这样的

<div id="app">
    <p>{{message.split('').reverse().join('')}}</p>
</div>

有了计算属性,模版中的代码是这样的

 <p>{{computedMessage}}</p>

2.计算属性可以缓存,提高性能

计算属性长得和方法一样,那是不是意味着我们可以直接把逻辑写在方法里面,然后直接调用方法就可以了呢?

<div id="app">
    <p>计算属性运行结果:{{computedMessage}}</p>
    <p>方法运行结果:{{fnMessage()}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            message:'hello nodeing!!!!'
        },
        methods:{
            fnMessage(){
                return this.message.split('').reverse().join('')
            }
        },
        computed: {
            computedMessage(){
                return this.message.split('').reverse().join('')
            }
        }
    });

</script>

从结果来看,它们的结果的确是一样的,但是它们也有区别,那就是计算属性是基于它们的依赖进行缓存的,而方法是需要每次去计算的,上面的代码中,fnMessage多次被调用,都会去执行内部的代码,而对于计算属性来说,它是基于它们的依赖进行缓存,意思就是说计算属性会缓存它计算出来的值,只要它的依赖没有变化,那么它每次取的值就是缓存起来的结果,而并不会再次去运算,这样就节省了调用的计算开销。在上面代码中,计算属性是依赖message的,只要message不变,计算属性不会再次计算,只有message变化了,计算属性才会再次计算

根据上面的结论,那么下面这种代码结果是不会变化的

computed: {
    computedMessage(){
        return Date.now()
    }
}

上面代码中,计算属性并不依赖于某一个属性,所以多次被调用并不会改变其结果

下面我们来看一个具体的例子,

<div id="app">
    <button @click="fn1">计算属性</button>
    <p v-if="isShow">{{computedMessage}}</p>
    <br><br>
    <button @click="fn2">方法</button>
    <p v-if="isFnShow">{{fnMessage()}}</p>


</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            isShow: false,
            isFnShow: false
        },
        methods: {
            fnMessage() {

                let date = new Date();
                return date.getMilliseconds()
            },
            fn1(){
                this.isShow = !this.isShow
            },
            fn2() {
                this.isFnShow = !this.isFnShow
            }
        },
        computed: {
            computedMessage() {
                let date = new Date();
                return date.getMilliseconds()
            }
        }
    });

</script>

螺钉课堂视频课程地址:http://edu.nodeing.com

vue基础入门(2.3)

标签:meta   eth   hello   color   使用   根据   性能   isa   用法   

原文地址:https://www.cnblogs.com/dadifeihong/p/12035287.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!