今日份分享内容：
一、插值（该代码块会放在末尾一并展示）
1、文本插值
2、使用v-html指令用于输出html代码
3、属性 HTML属性中的值应使用v-bind指令
4、表达式
5、class 样式绑定
二、指令
1、 v-if
2、 v-show
3、v-for：类似JS的遍历
三、过滤器
一、插值（该代码块会放在末尾一并展示）
1、文本插值
{{msg}} 
效果展示：
2、使用v-html指令用于输出html代码
所以需要添加v-html属性：
<div v-html="htmlstr"></div>
运行效果展示：
3、属性 HTML属性中的值应使用v-bind指令
三种属性绑定值：
value 直接输出值
v-bind:value 引用定义的变量值
:value 引用定义的变量值
任意属性都可以引用定义的变量值
运行效果展示：
4、表达式
Vue提供了完全的JavaScript表达式支持
截取字段： substring
数值增加：+
三元运算符： ？_：_
字符串拼接： +
如图所示：
效果展示：
5、class 样式绑定
有两种方式：
①使用id标签（.）/ 类标签（#）
效果展示：
②调用 定义的变量值
这里注意的是，我们引用的自定义变量的值也是从前面定义的id标签里来的！
效果展示：
6、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>1、插值</title><style>.a{color: yellow;}</style></head><body><!-- 定义边界 --><div id="app"><p>文本插值</p>{{msg}}<br/><p>html页面转义</p><div v-html="htmlstr"></div><br/><p>v-bind 属性绑定</p><input value="值" /><br/><input v-bind:value="aa" /><br/><input :value="aa" /><p>vue中可以对变量进行二次处理（也可使用js语法）</p>{{bb.substring(0,4)}}<br />{{cc + 4}}<br />{{dd ? '1':'0'}}<br /><span :id="ee + '1' ">书籍信息</span><p>class样式绑定</p><span class="a">我是一杯咖啡</span><span :class="ff">我是一杯咖啡</span><span :style="gg" >我是红色的咖啡</span></div></body><script type="text/jscript">/* 实例化一个vue */new Vue({el:"#app",data(){return{msg:"hello vue! 我是一杯咖啡",htmlstr:'<span style="color: red;">文本内容</span>',aa:'我是aa',bb:'hello world',cc:6,dd:false,ee:'book_',ff:'a',gg:'color:red;'}}})</script>
</html>二、指令
指的是带有“v-”前缀的特殊属性
1、 v-if
v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素,
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
效果展示：
2、 v-show
面试题：
v-show与v-if的区别？
v-show与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"。
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>1、插值</title></head><body><!-- 定义边界 --><div id="app"><p>v-if</p><!-- 输入分数：60分以下不及格，60-70为合格，70-80为良，80-90为优，90-100为优+ -->请输入分数：<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><p>v-show</p>请输入结果：<input v-model="showflag" /><span v-show="showflag">show：展示与否</span><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<strong></strong>" :value="l.id">{{l.name}}</div></div></body></body><script type="text/jscript">/* 实例化一个vue */new Vue({el:"#app",data(){return{score:0,showflag:false,/* 默认值为false */likes:[{id:1,name:'深夜网易云'},{id:2,name:'冲浪达人'},{id:3,name:'追剧达人'},{id:4,name:'梗王'}]}}})</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>1、插值</title></head><body><!-- 定义边界 --><div id="app"><p>过滤器</p>{{msg|strSplit|strSplit2}}</div></body></body><script type="text/jscript">/* 过滤器 */Vue.filter('strSplit',function(value){debugger;console.log(value);return value.substring(2,6);})Vue.filter('strSplit2',function(value){debugger;console.log(value);return value.substring(2,3);}) /* 实例化一个vue */new Vue({el:"#app",data(){return{msg:'hello vue! 我是一杯咖啡'}}})</script>
</html>
