Vue模板语法（01）
目录
一、插值
二、指令
三、过滤器
四、计算属性与监听属性
五、购物车案例
一、插值
①、文本
语法：{{定义的变量}}
②、html
语法：
v-html="定义的变量"③、属性绑定
语法：
<!-- 方法一 --> v-bind:value="定义的变量" <!-- 方法二 --> :value="定义的变量"④、表达式
Vue提供了完全的JavaScript表达式支持
⑤、class绑定
语法：
:class="定义的变量"⑥、style绑定
语法：
:style="定义的变量"代码：
<!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> <style> .a{ color:yellow; } </style> </head> <body> <div id="app"> <p>文本</p> {{msg}} <hr /> <p>html页面转义</p> <div v-html="htmlstr"></div> <hr /> <p>v-bind 属性绑定</p> <input value="值"/> <input v-bind:value="valuestr"/> <input :value="valuestr"/> <hr /> <p>vue中可以对变量进行二次处理</p> {{str.substring(0,4)}} <br /> {{num+4}}<br /> {{ok ? '1' : '0'}}<br /> <span :id="idstr+'1'">书籍信息</span> <hr /> <p>class绑定</p> <span :class="calssStr">文本内容</span> <hr /> <p>style绑定</p> <span :style="styleStr">文本内容</span> </div> <script type="text/javascript"> new Vue({ el:"#app", data(){ return{ //文本 msg:'你好啊 云鹤衫！！', //html转义 htmlstr:'<span style="color:red;">文本内容</span>', //属性绑定 valuestr:'云鹤衫', //表达式 str:'hello world', num:6, ok:false, idstr:'book_', // class绑定 calssStr:'a', // style绑定 styleStr:'color:blue;' } } }) </script> </body> </html>效果：
id绑定效果：
二、指令
简介：指的是带有“v-”前缀的特殊属性
核心指令：v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model
v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"
v-if和v-show的区别：
1、主要区别
（1）“v-show”只编译一次；而“v-if”不停地销毁和创建
（2）“v-if”更适合于带有权限的操作，渲染时判断权限数据
（3）v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作2、本质区别
（1）vue-show本质就是标签display设置为none，控制隐藏
（2）vue-if是动态的向DOM树内添加或者删除DOM元素
v-for：类似JS的遍历，
遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标
v-bind/v-on/v-model这三个指令已经在上一篇博客中使用过
thml代码块
<!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>
</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>
<hr />
<p>v-show</p>
请输入结果：<input v-model="showflag" />
<span v-show="showflag">show:展示与否</span>
<span v-if="showflag">if:展示与否</span>
<hr />
<p>v-for</p>
<select>
<option v-for="l in likes" :value="l.id">{{l.name}}</option>
</select>
<br />
<div v-for="l in likes">
<input type="checkbox" :value="l.id"/>{{l.name}}
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data() {
return {
score: 0,
showflag: false,
likes: [{
id : 1,
name : '军旗'
},
{
id : 2,
name : '桌球'
},
{
id : 3,
name : '乒乓球'
},
{
id : 4,
name : '篮球'
}
]
}
}
})
</script>
</body>
</html>
v-if效果：
v-show效果：
v-for效果：
下拉框：
复选框：
三、过滤器
全局过滤器：
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});局部过滤器：
new Vue({
filters:{'filterName':function(value){}}
});注1：过滤器函数接受表达式的值作为第一个参数
注2：过滤器可以串联
{{ message | filterA | filterB }}
注3：过滤器是JavaScript函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
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>
</style>
</head>
<body>
<div id="app">
<!-- {{msg|strSplit}} -->
<!-- 过滤器的串联 -->
{{msg|strSplit|strSplit2}}<br />
<!-- 过滤器传参 -->
{{msg|strSplit3(2,5)}}<br />
{{msg|strSplit3(1,4)}}
</div>
<script type="text/javascript">
Vue.filter('strSplit',function(value){
console.log(value);
return value.substring(0,5);
})
Vue.filter('strSplit2',function(value){
console.log(value);
return value.substring(3,5);
})
Vue.filter('strSplit3',function(value,a,b){
console.log(value);
return value.substring(a,b);
})
new Vue({
el: "#app",
data() {
return {
msg:'hello vue！！'
}
}
})
</script>
</body>
</html>
效果：
四、计算属性与监听属性
计算属性
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
computed:{}
监听属性
监听属性 watch，我们可以通过 watch 来响应数据的变化
watch:{}
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>
</style>
</head>
<body>
<div id="app">
<p>计算属性</p>
请输入第一个数：<input v-model="x"/><br />
请输入第二数：<input v-model="y"/><br />
结果为：{{addFlag}}
<hr />
<p>监听属性</p>
请输入千米：<input v-model="km"/><br />
请输入米：<input v-model="m"/>
</div>
<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>
</body>
</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>
</style>
</head>
<body>
<div id="app">
<p>购物车</p>
<table>
<tr>
<td>物品</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>帽子</td>
<td>
{{maoziDanjia}}
</td>
<td>
<input v-model="maoziShuliang"/>
</td>
<td>{{maoziXiaoji}}</td>
</tr>
<tr>
<td>衣服</td>
<td>
{{yifuDanjia}}
</td>
<td>
<input v-model="yifuShuliang"/>
</td>
<td>{{yifuXiaoji}}</td>
</tr>
<tr>
<td>裤子</td>
<td>
{{kuziDanjia}}
</td>
<td>
<input v-model="kuziShuliang"/>
</td>
<td>{{kuziXiaoji}}</td>
</tr>
<tr>
<td>总价</td>
<td colspan="3">{{zongJia}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data() {
return {
maoziDanjia:20,
yifuDanjia:300,
kuziDanjia:700,
maoziShuliang:0,
yifuShuliang:0,
kuziShuliang:0
}
},computed: {
// 因为数量 会影响小计，小计不会影响数量，使用使用计算属性
maoziXiaoji:function(){
return parseInt(this.maoziDanjia) * parseInt(this.maoziShuliang);
},
yifuXiaoji:function(){
return parseInt(this.yifuDanjia) * parseInt(this.yifuShuliang);
},
kuziXiaoji:function(){
return parseInt(this.kuziDanjia) * parseInt(this.kuziShuliang);
},
zongJia:function(){
return parseInt(this.maoziXiaoji) + parseInt(this.yifuXiaoji) + parseInt(this.kuziXiaoji);
}
}
})
</script>
</body>
</html>
