2.3. Binding style
2.3.1. Binding class style
1. Bind single 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. Bind multiple styles
<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. can be determined based on whether the value of a style
<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. Binding style style
1. All written in an object style
<div :style="{width:'100px',height:'100px',backgroundColor:'red'}"></div>Note that the above code is the css background-color, need to remove the '=', then capitalized color, there are similar fontSize, marginLeft etc.
2. The pattern can be written in an object data, and then to render the label
<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>The wording above is relatively clear, it is recommended to write the data inside style
3 may be provided while a plurality 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. Binding form input
2.4.1. Basic usage
1. Text
<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>Note: At this time, if the set value is not in effect, if there is a default value, preferably initialized example vue
2. single box
<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. box
<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. Select block
<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. Modifiers
1.number the default string type digital number is converted to
<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 remove spaces
<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 Calculation Properties
2.5.1. What is to calculate the property?
Calculated attribute literally, which is similar to the use of the property, but it can be calculated, call the method is popular to say this: obj.fn (), call the property is this: obj.name, calculated properties from the content might look like a method, but when in use, you can call without parentheses, we look at the following example:
<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. Role of calculating an attribute
1 using the calculated property allows stencil use less logic calculation, easy to maintain
If the attribute code is not calculated, the template is such that
<div id="app">
<p>{{message.split('').reverse().join('')}}</p>
</div>With the calculated properties, template code is such
<p>{{computedMessage}}</p>2. Calculate attribute cache can improve performance
Properties and methods of calculation looks like that mean that we can write directly to the logic inside the method, and then call the direct method can it?
<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>From the results, their results are indeed the same, but they are different, that is calculated based on their properties are dependent on the cache, and is required to calculate each of the above code, fnMessage repeatedly called, to execute internal code, and for calculating properties, it is cached based on their dependencies, meaning that it is calculated attribute caches calculated value, as long as it is not dependent change, then each time it takes the value is cached results, and will not go operation again, thus saving computational overhead call. In the above code, the calculation is dependent on the properties of the message, as long as the message unchanged, calculate the property will not be counted again, just change the message, calculate the properties will be calculated again
According to the above conclusion, the following results that the code will not change
computed: {
computedMessage(){
return Date.now()
}
}In the above code, a calculated attribute is not dependent on a property, it is called repeatedly and does not change the result
Let's look at a specific example,
<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>Screw classroom video lessons address: http: //edu.nodeing.com