VUE 第二次课
--------------------------------------
v-if
v-else-if
v-else-if
v-esle
--------------------------------------
this.shaoplist.splice(index,1);//数组删除 索引 长度
添加 this.shaoplist.push({id:(this.shaoplist.length)+1,shopname:isgjz,flag:true});
作业
--------------------------------------
v-model //深入
属性绑定 v-bind 简写 :属性="条件 布尔型"
例子 v-bind:disabled="value=='b'"
:disabled="value=='a'"
输入a则警用
<input type="text" v-model="value" :disabled="value=='a'">
<input type="text" v-model="value" v-bind:disabled="value=='b'">
单选框 存的是字符串
复选框 存的是数组
----------------------------------------------------------------------------
v-bind
绑定属性 操作属性
可以绑定 src style class atl title ......
style 写法要注意 驼峰式写法
<p :style="{fontSeize:'30px',color:'#f00',backgroundColor:'#ccc'}">1241058165</p>
----------------------------------------------------------------------------
网站换皮肤
----------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<script stpe="text/javascript" src="lib/jquery/dist/jquery.js"></script>
<script stpe="text/javascript" src="lib/bootstrap/dist/js/bootstrap.js"></script>
<script stpe="text/javascript" src="vue/dist/vue.js"></script>
<script>
window.onload = function(){
var demo3 =new Vue({
el:"#demo3",
data:{
msg:"1241058165",
value:"",
flag:true,
flagn:["b","c"], //复选框 默认选中
radioP:"1",
items:[
{text:"老徐",value:"a"},
{text:"老师",value:"b"},
{text:"学生",value:"c"},
{text:"VIP",value:"d"},
{text:"E神",value:"e"},
{text:"小木",value:"f"}
],
selected:"b",//选中的值
num:"20",
},
methods:{
}
})
}
</script>
</head>
<body>
<div id="demo3">
<p>{{msg}}</p>
<h1>输入a则警用</h1>
<!--input输入a则警用<-->
<input type="text" v-model="value" :disabled="value=='a'">
<input type="text" v-model="value" v-bind:disabled="value=='b'">
<div>
<!--复选框-->
<input type="checkbox" v-model="flag" >{{flag}}
<!--这里的 v-model 打印出来是个布尔类型 刚好可以控制复选框的选中-->
</div>
<div>
<input type="checkbox" v-model="flagn" value="a">a
<input type="checkbox" v-model="flagn" checked value="b">b
<input type="checkbox" v-model="flagn" value="c">c
<input type="checkbox" v-model="flagn" value="d">d
<span>{{flagn}}</span>
<!--交互 可以直接传给后台 复选框 组-->
</div>
<div>
<label><input type="radio" v-model="radioP" name="test" value="0">男</label>
<label><input type="radio" v-model="radioP" name="test" value="1">女</label>
<p>{{radioP}}</p>
<!--单选框-->
</div>
<div>
<select v-model="selected" name="" id="">
<option v-for="item in items" :value="item.value">{{item.text}}</option>
</select>
<!--下拉框-->
<p>{{selected}}</p>
</div>
<!--修饰符-->
<div>
<input type="text" v-model.trim="msg">
<p>去掉前后空格</p>
<p>只能输入数字</p>
<input type="number" v-model.number="num" >
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<script stpe="text/javascript" src="lib/jquery/dist/jquery.js"></script>
<script stpe="text/javascript" src="lib/bootstrap/dist/js/bootstrap.js"></script>
<script stpe="text/javascript" src="vue/dist/vue.js"></script>
<script>
window.onload = function(){
var demo4 =new Vue({
el:"#demo4",
data:{
msg:"1241058165",
href:"https://www.baidu.com/",
src:"https://www.baidu.com/img/bd_logo1.png?where=super",
aa:"aa",//classname
bb:"bb",
flag:true,
style1:{fontSeize:'30px',color:'#f00',backgroundColor:'#ccc'},
style2:{marginTop:'20px'},
flags:true
},
methods:{
}
})
}
</script>
<style>
.aa{color: #f00;font-seize:16px}
.bb{background: #ccc;}
</style>
</head>
<body>
<div id="demo4">
<a :href="href">1111</a>
<img v-bind:src="src" alt="" v-bind:title="msg">
<div>
<p :class="aa">单个class</p>
<p :class="[aa,bb]">引用多个class</p>
</div>
<div>
<!--json 方式-->
<div :class="{aa:flag,bb:flag}">
json 方式控制class
</div>
</div>
<div>
<!--style-->
<p :style="{fontSeize:'30px',color:'#f00',backgroundColor:'#ccc'}">1241058165</p>
<p :style="style1">1241058165</p>
<p :style="[style1,style2]">引用多个</p>
</div>
<div>
<!--三目 class-->
<p :class="flags?aa:bb">三目方法class</p>
</div>
<!--三目 style-->
<p :style="flags?style1:style2">三目方法style</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>解决浏览器闪烁</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<script stpe="text/javascript" src="lib/jquery/dist/jquery.js"></script>
<script stpe="text/javascript" src="lib/bootstrap/dist/js/bootstrap.js"></script>
<script stpe="text/javascript" src="vue/dist/vue.js"></script>
<script>
window.onload = function(){
var demo5 =new Vue({
el:"#demo5",
data:{
msg:"<div>1241058165</div>",
},
methods:{
}
})
}
</script>
<style>
[v-cloak]{display: none;}
</style>
</head>
<body>
<div id="demo5">
<p>{{msg}}</p>
<p v-text="msg"></p>
<p v-html="msg"></p>
<p v-vloak>{{msg}}</p>
<!--v-vloak 解决浏览器闪烁 还要写css-->
</div>
</body>
</html>