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 ...
随机推荐
- jchdl - GSL实例 - ComplementOne（一的补码）
https://mp.weixin.qq.com/s/zZTnDdbCUCRGGpgpfAZsYQ 一的补码指对二进制数的每一位分别求补(二进制运算下0,1互为补数),实际运算即为对每一位取反.最 ...
- Rocket - config - Configs
https://mp.weixin.qq.com/s/z2gUYuYQAHQCa_5HZcBszw 介绍各个配置项的组织方式. 参考链接: https://docs.qq.com/sheet/ ...
- 【算法基础】Trie算法
字符串统计 维护一个字符串集合,支持两种操作: “I x”向集合中插入一个字符串x: “Q x”询问一个字符串在集合中出现了多少次. 共有N个操作,输入的字符串总长度不超过 105105,字符串仅包含 ...
- Ftrace的部分使用方法
ftrace主要是用于调试linux kernel调度相关的一个工具,也可用于分析部分kernel性能问题. 相关ftrace的介绍可以参考:kernel/msm-4.9/Documentation/ ...
- Java 第十一届 蓝桥杯 省模拟赛 70044与113148的最大公约数
问题描述 70044与113148的最大公约数是多少? 答案提交 这是一道结果填空的题,你只需要算出结果后提交即可.本题的结果为一个整数,在提交答案时只填写这个整数,填写多余的内容将无法得分. pac ...
- Java实现 洛谷 采药
题目描述 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他出了一个难题.医师把他带到一个到处都是草药的山洞里对他说:" ...
- Java实现 LeetCode 696 计数二进制子串（暴力）
696. 计数二进制子串 给定一个字符串 s,计算具有相同数量0和1的非空(连续)子字符串的数量,并且这些子字符串中的所有0和所有1都是组合在一起的. 重复出现的子串要计算它们出现的次数. 示例 1 ...
- Shell中傻傻分不清楚的TOP3
Shell中傻傻分不清楚的TOP3 发布文章 近来小姐姐又犯憨憨错误,问组内小伙伴export命令不会持久化环境变量吗?反正我是问出口了..然后小伙伴就甩给了我一个<The Linux Comm ...
- 什么？你还不会获取地址栏（url）的值
function getUrlParam(name) {//封装方法 var reg = new RegExp("(^|&)" + name + "=([^&am ...
- OO第一作业周期（前四周）总结
前言:回顾这三次的作业,在一次次的练习下渐渐理解了一些Java的一些基本知识和类与对象的含义与用法,也找到了很多自身的不足和问题,主要是反映类与类之间的关系没有理解到位,这次总结后又有了新的感悟和理解 ...