vue基础入门（2.3）
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）的更多相关文章
- vue基础入门（2.1）
2.vue基础用法 2.1.事件处理 2.1.1.监听事件 使用v-on:事件名称 = '事件处理函数'的形式来监听事件,事件处理函数要写在methods后面的对象中 <!DOCTYPE htm ...
- vue基础入门
Hello World <body> <!-- 在angularJS中用ng-model --> <!-- {{mseeage?message:11}}支持三元表达式 ...
- vue基础入门（4）
4.综合实例 4.1.基于数据驱动的选项卡 4.1.1.需求 需求说明: 1. 被选中的选项按钮颜色成橙色 2. 完成被选中选项下的数据列表渲染 3. 完成选项切换 4.1.2.代码实现 <!D ...
- vue基础入门（3）
3.组件基础 3.1.什么是组件? 3.1.1.理解组件 前端组件化开发是目前非常流行的方式,什么是前端组件化开发呢?就是将页面的某一部分独立出来,将这一部分的数据.视图.以及一些控制逻辑封装到一个组 ...
- vue基础入门（2.2）
2.2.基础指令 2.2.1.什么是指令 指令 (Directives) 是带有 v- 前缀的特殊特性,指令特性的值预期是单个 JavaScript 表达式,指令的职责是,当表达式的值改变时,将其产生 ...
- Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
- Vue基础入门笔记
不是面向DOM进行编程,而是面向数据去编程.当数据发生改变,页面就会随着改变. 属性绑定(v-bind)和双向数据绑定(v-model) 模板指令(v-bind:)后面跟的内容不再是字符串而是: js ...
- vue基础入门（1）
1.vue初体验 1.1.vue简介 1.1.1.vue是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,什么叫做渐进式呢?通俗的讲就是一层一层的,一步一 ...
- vue 基础入门（一）
app-1 :声明式渲染 app-2 :绑定元素特性 v-bind 特性被称为指令.指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性. app-3 app-4 :条件与循环 app-5 ,ap ...
随机推荐
- Java实现 LeetCode 816 模糊坐标（暴力）
816. 模糊坐标 我们有一些二维坐标,如 "(1, 3)" 或 "(2, 0.5)",然后我们移除所有逗号,小数点和空格,得到一个字符串S.返回所有可能的原始 ...
- Java实现蓝桥杯 算法提高 身份证号码升级
算法提高 身份证号码升级 时间限制:1.0s 内存限制:256.0MB 问题描述 从1999年10月1日开始,公民身份证号码由15位数字增至18位.(18位身份证号码简介).升级方法为: 1.把15位 ...
- Java实现 LeetCode 152 乘积最大子序列
152. 乘积最大子序列 给定一个整数数组 nums ,找出一个序列中乘积最大的连续子序列(该序列至少包含一个数). 示例 1: 输入: [2,3,-2,4] 输出: 6 解释: 子数组 [2,3] ...
- 从linux源码看socket的阻塞和非阻塞
从linux源码看socket的阻塞和非阻塞 笔者一直觉得如果能知道从应用到框架再到操作系统的每一处代码,是一件Exciting的事情. 大部分高性能网络框架采用的是非阻塞模式.笔者这次就从linux ...
- 哪些年，我们玩过的Git
作者:玩世不恭的Coder公众号:玩世不恭的Coder时间:2020-06-05说明:本文为原创文章,未经允许不可转载,转载前请联系作者 哪些年,我们玩过的Git 前言一.前期工作常用基本概念的理解G ...
- （前言一）HTTP报文
01 概述 客户端与服务器端之间的通信,通过HTTP协议,以HTTP报文的形式来实现数据的交互. HTTP报文是HTTP通信时发送的数据块,本文主要从以下几个方面介绍HTTP报文:HTTP报文结构.方 ...
- C# 反射详解一
首先反射是基于System.Reflection命名空间下,.Net框架提供的帮助类库,可以读取并使用metadata(元数据:描述对象信息的数据). 我们再来看下代码生成编译的总过程. 编译器编译( ...
- iOS-地图定位 && 解码与反解码
前段时间,公司开发的App用到了地图和定位,所以记录一下,作为回顾总结. 对于地图和定位,苹果公司提供给了两个框架: MapKit:用于地图展示 Core Location ...
- Flask 的配置文件
Flask 的配置文件 四种方法给 Flask 做配置 1直接给 app 对象赋值属性 以字典的形式,给flask做配置 以文件的形式,给flask做配置(django 就是用这种) 以类的形式,给f ...
- 09.Django-数据库优化
Django查询数据库性能优化 现在有一张记录用户信息的UserInfo数据表,表中记录了10个用户的姓名,呢称,年龄,工作等信息. models文件 from django.db import mo ...