2.3.样式绑定
2.3.1.绑定class样式
1.绑定单个class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
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="{'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: {
'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: {
'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