Vue模块语法上(插值指令过滤器计算属性-监听属性)
文章目录
一、插值
1）文本
2）html
3）属性
4）表达式
5）class绑定
6）style绑定
二、指令
1.v-if|v-else|v-else-if
2.v-show
3.v-for
4.v-bind
5.v-on
6.v-model
三、过滤器
全局过滤器
局部过滤器
四、计算属性&监听属性
计算属性
监听属性
案例--购物车
一、插值
1）文本
{{msg}}
2）html
使用v-html指令用于输出html代码
3）属性
HTML属性中的值应使用v-bind指令
4）表达式
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
5）class绑定
使用方式：v-bind:class="classStr"
classStr的类型：字符串、数组、对象
6）style绑定
v-bind:style="styleStr"
styleStr的类型：字符串、数组、对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
<!-- class样式绑定的样式 -->
<style>
.a{
color: yellow;
}
</style>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<p>文本</p>
{{msg}}
<p>html 页面转义</p>
<div v-html="htmlstr"></div>
<p>v-bind属性绑定</p>
<!-- 所有原生态的属性，要利用vue的变量，前加v-bind -->
<input value="值" />
<input v-bind:value="valuestr" /><br />
<input :value="valuestr" />
<p>表达式 vue中可以对变量进行二次处理</p>
{{str.substring(0,4)}}<br />
{{num + 4}}<br />
{{ok ? '1' : 0}}<br />
<span :id="idstr+'1'">书籍信息</span>
<p>class样式绑定</p>
<span :class="classStr">文本内容</span>
<p>style绑定</p>
<span :style="styleStr">文本内容</span>
</div>
</body>
<script type="text/javascript">
/* 创建实例 */
new Vue({
el:'#app',
data(){
return {
msg:'hello vue!!!',
htmlstr:'<span style="color:red;">文本内容</span>',
valuestr:'vue值',
str:'hello world',
num:6,
ok:false,
idstr:'book_',
classStr:'a',
styleStr:'color:blue'
}
}
})
</script>
</html>
二、指令
指的是带有“v-”前缀的特殊属性
核心指令
(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model）
1.v-if|v-else|v-else-if：
根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
<!-- class样式绑定的样式 -->
<style>
.a{
color: yellow;
}
</style>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<p>v-if</p>
<!-- 当我输入分数60分：不及格 60-70：为合格 70-80：良 80-90：优秀 90+：优++ -->
请输入分数：<input v-model="score" />
对应结果：
<span v-if="score<60">不及格</span>
<span v-else-if="score<70">合格</span>
<span v-else-if="score<80">良</span>
<span v-else-if="score<90">优秀</span>
<span v-else-if="score<=100">优++</span>
<span v-else="">输入不合法</span>
</div>
</body>
<script type="text/javascript">
/* 创建实例 */
new Vue({
el:'#app',
data(){
return {
score:0,
}
}
})
</script>
</html>
2.v-show：
与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<p>v-show</p>
请输入结果：<input v-model="showflag" />
<span v-show="showflag">show展示与否</span>
<span v-if="showflag">if展示与否</span>
</div>
</body>
<script type="text/javascript">
/* 创建实例 */
new Vue({
el:'#app',
data(){
return {
showflag:false
}
}
})
</script>
</html>
3.v-for：
类似JS的遍历：
遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<p>v-for</p>
<select>
<!-- 下拉框 -->
<option v-for="l in likes" :value="l.id">{{l.name}}</option>
</select>
<!-- 复选框 -->
<div v-for="l in likes">
<input type="checkbox" :value="l.id" />{{l.name}}
</div>
</div>
</body>
<script type="text/javascript">
/* 创建实例 */
new Vue({
el: '#app',
data() {
return {
likes: [{
id: 1,
name: '军旗'
},
{
id: 2,
name: '乒乓球'
},
{
id: 3,
name: '篮球'
},
{
id: 4,
name: '羽毛球'
}
]
}
}
})
</script>
</html>
4.v-bind：
绑定属性
5.v-on：
绑定事件
6.v-model：
用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值 v-for/v-model一起绑定[多选]复选框和单选框
它们三个详见上一期博客
三、过滤器
全局过滤器
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});
局部过滤器
new Vue({
filters:{'filterName':function(value){}}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
{{msg|all}},{{msg|single}},{{msg|all|single}},{{msg|param(4,5)}}
</div>
</body>
<script type="text/javascript">
// 全局过滤器
Vue.filter('all', function(value) {
return value.substring(1, 4);
});
// 绑定边界 ES6具体体现
new Vue({
el: '#app',
data() {
return {
msg:"hello vue！！！"
};
},
methods: {
handle() {
alert("触发事件");
}
},
filters:{
'single':function(val){
return val.substring(2,3);
},
'param':function(val,start,end){
return val.substring(start,end);
}
}
})
</script>
</html>
过滤器可以串联
{{ message | filterA | filterB }}
过滤器是JavaScript函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
四、计算属性&监听属性
计算属性
一方影响另一方，推动作用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<p>计算属性</p>
请输入第一个数:<input v-model="x" /><br />
请输入第二个数:<input v-model="y" /><br />
结果为:{{addFlag}}
</div>
</body>
<script type="text/javascript">
/* 创建实例 */
new Vue({
el:'#app',
data(){
return {
/* 定义变量 */
x:0,
y:0
}
},computed:{
/* 定义计算属性 */
addFlag:function(){
return parseInt(this.x) + parseInt(this.y);
}
}
})
</script>
</html>
监听属性
相互影响
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<p>计算属性</p>
请输入第一个数:<input v-model="x" /><br />
请输入第二个数:<input v-model="y" /><br />
结果为:{{addFlag}}
<p>监听属性</p>
请输入千米:<input v-model="km" /><br />
请输入米:<input v-model="m" /><br />
</div>
</body>
<script type="text/javascript">
/* 创建实例 */
new Vue({
el:'#app',
data(){
return {
/* 定义变量 */
x:0,
y:0,
km:0,
m:0
}
},computed:{
/* 定义计算属性 */
addFlag:function(){
return parseInt(this.x) + parseInt(this.y);
}
},watch:{
km:function(v){
//冒号 :之前对应的是被监听的属性，v指的是被监听属性的值
//当v对应的值发生变化的时候，会执行该方法
//v代表千米
this.m=parseInt(v)*1000;
},
m:function(v){
this.km=parseInt(v)/1000;
}
}
})
</script>
</html>
案例--购物车
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<p>购物车</p>
<table border="1px;">
<tr>
<th>物品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
<tr>
<th>帽子</th>
<th>
{{mzDanjia}}
</th>
<th>
<input v-model="mzShuliang" />
</th>
<th>{{mzXiaoji}}</th>
</tr>
<tr>
<th>衣服</th>
<th>
{{yfDanjia}}
</th>
<th>
<input v-model="yfShuliang" />
</th>
<th>{{yfXiaoji}}</th>
</tr>
<tr>
<th>裤子</th>
<th>
{{kzDanjia}}
</th>
<th>
<input v-model="kzShuliang" />
</th>
<th>{{kzXiaoji}}</th>
</tr>
<tr>
<td>总价</td>
<td colspan="3">
{{zongjia}}
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
/* 创建实例 */
new Vue({
el:'#app',
data(){
return {
/* 定义变量 */
mzDanjia:20,
yfDanjia:3000,
kzDanjia:700,
mzShuliang:1,
yfShuliang:1,
kzShuliang:1
}
},computed:{
//因为数量会影响小计，小计变化影响数量，所以使用计算属性
mzXiaoji:function(){
return parseInt(this.mzDanjia) * parseInt(this.mzShuliang);
},
yfXiaoji:function(){
return parseInt(this.yfDanjia)*parseInt(this.yfShuliang);
},
kzXiaoji:function(){
return parseInt(this.kzDanjia)*parseInt(this.kzShuliang);
},
zongjia:function(){
return parseInt(this.yfXiaoji)+parseInt(this.kzXiaoji)+parseInt(this.mzXiaoji);
}
}
})
</script>
</html>
