vue基础入门（2.3）

其他 2019-12-13 15:34:09 阅读次数: 0

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

猜你喜欢

转载自www.cnblogs.com/dadifeihong/p/12035287.html
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022