vue基础-动态class
使用v-bind给标签class设置动态的值
语法：
- :class="{类名:布尔值}"
<style>
.red_str {
color: red;
}
</style>
</head>
<body>
<div id="app">
<!--
:class="{类名:布尔值}"
场景: vue 变量控制标签是否应该有类名
-->
<p :class="{'red_str':bool}">动态class</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
bool: true,
},
})
</script>
vue基础-动态style
给标签动态设置style的值
语法:
:style="{css属性:值}"
<body>
<div id="app">
<!--
语法:
:style="{css属性:值}"
-->
<p :style="{backgroundColor:colorStr,color:str,border:borStr}">
动态style
</p>
<p :style="{'background-color':colorStr,color:str,border:borStr}">
动态style
</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
colorStr: 'red',
str: '#fff',
borStr: '5px solid blue',
},
})
</script>
vue过滤器
定义使用
转换格式，过滤器就是一个函数，传入值返回处理后的值
过滤器只能用在 插值表达式 和v-bind 表达式
场景：
- 字母转大写：输入 hello 输出 ‘HELLO’
- 字符串翻转 输入'hello world' 输出 ’dlrow olleh‘
- 时间戳转换为时间日期格式
语法：
- 全局： Vue.filter('过滤器名',(值)=>{return 返回处理后的值})
- 局部: filters:(过滤器名字,(值)=>{return 返回处理后的值})
<body>
<div id="app">
<p>原来的样子:{{msg}}</p>
<!--
2:过滤器使用
语法： {{值|过滤器名字}}
-->
<p>{{msg | toUp}}</p>
<p>{{msg | reverse}}</p>
</div>
<hr />
<div id="main">
{{str }}
<p>{{str | reverse}}</p>
</div>
</body>
<script>
// 全局过滤器 任何一个vue文件中都可以使用
/*
Vue.filter("过滤器的名字",(val)=>{return 处理后的值})
*/
Vue.filter('reverse', (val) => {
return val.split('').reverse().join('')
})
var vm = new Vue({
el: '#app',
data: {
msg: 'hello vue',
},
// 局部--局部--过滤器
// 只能在当前vue文件(vue实例)中使用
/*
filters:{
过滤器1(val){
return 处理后的值
},
过滤器2(val){
return 处理后的值
}
}
*/
filters: {
toUp(val) {
return val.toUpperCase()
},
},
})
// ---------------------------
var aa = new Vue({
el: '#main',
data: {
str: 'good bye',
},
})
</script>
传参和多过滤器
可同时使用多个过滤器，或给过滤器传参
语法:
- 过滤器传参 vue变量 | 过滤器(实参)
- 多个过滤器 vue变量|过滤器1|过滤器2
<body>
<div id="app">
<p>原来的样子{{msg}}</p>
<!--
给过滤器传参
语法 vue变量 | 过滤器名(值)
-->
<p>翻转过滤器{{msg | reverse("-")}}</p>
<!--
多个过滤器使用
语法 vue变量 | 过滤器1 | 过滤器2
-->
<p>{{msg|toUp|reverse("|")}}</p>
<p :title="msg|toUp|reverse('|')">鼠标停留</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world',
},
filters: {
toUp(val) {
return val.toUpperCase()
},
reverse(val, s) {
return val.split('').reverse().join(s)
},
},
})
</script>
vue计算属性
computed
一个数据依赖另外一些数据计算而来的结果
(一个变量，值要通过计算得到，变量要在computed中定义)
语法:
computed:{
'计算属性名'(){
return 值
}
}
代码
<body>
<div id="app">
<p>{{num}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
a: 10,
b: 20,
},
/*
一个变量的值 ，需要用另外的变量计算得来
computed:{
计算属性名(){
return 值
}
}
注意:计算属性和data都是变量---不能重名
2函数内依赖的变量变化，会自动重新计算结果返回
*/
computed: {
// 1页面加载会默认执行一次 给变量num赋初始值
num() {
console.log(1)
return this.a + this.b
},
},
})
</script>
vue计算属性--缓存
计算属性 基于他们的依赖项的值结果进行缓存的，只要依赖的变量不变，都直接从缓存取结果
<body>
<div id="app">
<p>{{reverseMessage}}</p>
<p>{{reverseMessage}}</p>
<p>{{reverseMessage}}</p>
<p>{{getMessage()}}</p>
<p>{{getMessage()}}</p>
<p>{{getMessage()}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world',
},
computed: {
/*
带缓存
计算属性对应的函数执行后，会把return的值缓存起来
依赖项不变，多次调用都是从缓存取值
依赖项变化 函数会自动 重新执行--并缓存新的值
*/
reverseMessage() {
console.log('计算属性执行了')
return this.msg.split('').reverse().join('')
},
},
methods: {
getMessage() {
console.log('函数执行了')
return this.msg.split('').reverse().join('')
},
},
})
</script>
计算属性-完整写法
计算属性也是变量 ，如果想要直接赋值，需要使用完整写法
语法:
computed：{
‘属性名’:{
set(值){
},
get(){
}
}
}
需求:
计算属性给v-model使用
<body>
<div id="app">
<div>
<span>姓名</span>
<input type="text" v-model="full" />
</div>
</div>
</body>
<script>
// 给计算属性赋值 需要setter
/*
computed：{
‘属性名’:{
set(值){
},
get(){
}
}
}
*/
var vm = new Vue({
el: '#app',
data: {},
computed: {
full: {
set(val) {
// 给full赋值触发set方法
console.log(val, 'set')
},
get() {
console.log('get')
//使用full的值 触发get方法
return '无名氏'
},
},
},
})
</script>
\
