VUE 学习第二次

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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 >
	<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="" >
	<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 >
	<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 >
	<p>{{msg}}</p>
	<p v-text="msg"></p>
	<p v-html="msg"></p>
	<p v-vloak>{{msg}}</p>
	<!--v-vloak 解决浏览器闪烁 还要写css-->
	</div>
</body>
</html>

以上是 VUE 学习第二次 的全部内容， 来源链接： utcz.com/z/376753.html

回到顶部