标签:meta eth hello color 使用 根据 性能 isa 用法
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
}
}
});
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>
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>
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>
计算属性从字面上理解,它类似属性的用法,但是却是可以计算的,通俗的说方法的调用是这样的: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>
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
标签:meta eth hello color 使用 根据 性能 isa 用法
原文地址:https://www.cnblogs.com/dadifeihong/p/12035287.html