目录
一、插值
1.1.1 文本
<div id="app">
<p>文本</p>
{{msg}}
</div>
1.1.2 html
使用v-html指令用于输出html代码
<p>html页面转义</p>
<div v-html="htmlstr"></div>
1.1.3 属性
HTML属性中的值应使用v-bind指令
<p>v-bind属性绑定</p>
<input v-bind:value="valuestr" />
<!-- 写法2 -->
<input :value="valuestr" />
1.1.4 表达式
Vue提供了完全的JavaScript表达式支持
<p>vue值可以对变量进行二次处理</p>
{{str.substring(0,4)}}<br>
{{num+4}}<br>
{{ok ? '1' :'0'}}<br >
<span :id="idstr+'id'">书籍信息</span>
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
整体效果如图：
1.1.5 class绑定
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<style>
.a{
color: greenyellow;
}
</style>
</head>
<!-- class绑定 -->
<span class="a">文本内容</span>
1.1.5 style 绑定
<!-- sytle绑定 -->
<span style="styleStr">文本内容</span>
<script type="text/javascript">
new Vue({
el:'#app',
data (){
return {
msg:'hello vue02~',
htmlstr:'<span style="color:red;">文本内容</span>',
valuestr:'vue值',
str:'hello world',
num:4,
ok:false,
idstr:'book_',
styleStr:'color:bule;'
}
}
})
</script>
二、指令
v-if用法
<!-- 60分下为不及格；60-70合格；70-80良好；80-90为优秀；90以上优+ -->
<div id="app">
<p>v-if</p>
请输入分数：<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>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
// 设置vue所管理边界中可以使用的变量
return {
score:0
}
}
})
</script>
v-show 用法
<p>v-show</p>
请输入结果：
<input v-model="showflag" />
<span v-if="showflag"> if:展示与否</span>
<span v-show="showflag"> show:展示与否</span>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
// 设置vue所管理边界中可以使用的变量
return {
score:0,
showflag:true
}
}
})
</script>
若
<script type="text/javascript">
new Vue({
el:'#app',
data(){
// 设置vue所管理边界中可以使用的变量
return {
score:0,
showflag:false
}
}
})
</script>
两者区别；
v-if与v-show的区别是？
v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none" ；v-show会隐藏内容
v-for
<p>v-for 下拉框</p>
<select>
<option v-for="l in likes" :value="l.id">
{{l.name}}
</option>
</select>
<p>多选框</p>
<div v-for="l in likes" >
<input type="checkbox" :value="l.id"></input>
{{l.name}}
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
// 设置vue所管理边界中可以使用的变量
return {
score:0,
showflag:true,
likes:[
{id:1,name:'画画'},
{id:2,name:'唱歌'},
{id:3,name:'吃鸡'},
{id:4,name:'看书'}
]
}
}
})
</script>
下拉框如图
复选框如图
三、过滤器
<div id ="app">
过滤器1
{{msg|strSplit|strSplit2}}
<!-- 过滤器的传参 -->
{{msg|strSplit3(2,5)}}
</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(){
// 设置vue所管理边界中可以使用的变量
return {
msg:'hello goodgood'
}
}
})
</script>
过滤器1、2
过滤器传参
四 、计算属性&监听属性
<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>
方法
<script type="text/javascript">
new Vue({
el:'#app',
data(){
// 设置vue所管理边界中可以使用的变量
return {
x:0,
y:0
}
},computed:{
//计算属性
addFlag:function(){
return parseInt(this.x)+parseInt(this.y);
}
},
watch:{//监听属性
km:function(v){//千米
// v指的是 被监听属性的值 :前的是被监听的属性 当v对应的值方式变化时会执行此方法
this.m =parseInt(v)*1000
},
m:function(v){//米
this.km =parseInt(v)/1000;
}
}
})
</script>
计算属性
监听属性
五、购物车案例
<!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>
<!-- 60分下为不及格；60-70合格；70-80良好；80-90为优秀；90以上优+ -->
<div id="app">
<table >
<tr>
<td>物品</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>帽子</td>
<td>{{maozidanjia}}</td>
<td><input v-model="maozishuliang" /> </td>
<td>{{maozixaioji}}</td>
</tr>
<tr>
<td>衣服</td>
<td>{{yifudanjia}}</td>
<td><input v-model="yifushuliang" /> </td>
<td>{{yifuxioaji}}</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>
</table>
</div>
</body>
<script type="text/javascript">
new Vue({//计算属性 数量会影响小计,所以使用计算属性
el:'#app',
data(){
// 设置vue所管理边界中可以使用的变量
return {//定义初始价格
maozidanjia:200,
yifudanjia:100,
kuzidanjia:23,
maozishuliang :1 ,
yifushuliang :1,
kuzishuliang:1
}
}
,computed:{
//计算属性 计算小计
maozixaioji:function(){
return parseInt(this.maozidanjia)*parseInt(this.maozishuliang);
},
yifuxioaji:function(){
return parseInt(this.yifudanjia)*parseInt(this.yifushuliang);
},kuzixiaoji :function(){
return parseInt(this.kuzidanjia)*parseInt(this.kuzishuliang);
},zongjia :function(){
return parseInt(this.maozixaioji)+parseInt(this.yifuxioaji)+parseInt(this.kuzixiaoji);
}
}
})
</script>
</html>
如图
