VUE模板语法1

最新推荐文章于 2023-07-20 01:12:46 发布

周甘木

最新推荐文章于 2023-07-20 01:12:46 发布

阅读量322

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_67864917/article/details/126669051

版权

一：插值

1.1文本

<!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>
	</head>
	<body>
		<div id="app">
			<p>文本</p>
			{{msg}}
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return{
					msg:'hello vue!!!!!!'
				}
			}
		})
	</script>
</html>

1.2 html

使用v-html指令用于输出html代码

<p>html页面转义</p>
			<div v-html="htmlstr"></div>

htmlstr:'<span style="color:red;">文本类</span>',

1.3 属性

HTML属性中的值应使用v-bind指令

<p>v-bind 属性绑定</p>
			<input value="值" />
			<input -bind:value="valuestr" />
			<input :value="valuestr" />

valuestr:'vue值',
str:'hello world',

1.4 表达式

<p>vue中可以对变量进行二次处理</p>
			{{str.substring(0,4)}}<br >
			{{num + 4}}<br>
			{{ok ? '1' : '0'}}<br>

num:6,
ok:false,

1.5 class绑定

<p>class绑定</p>
<span :class="ClassStr">文本内容</span>

ClassStr:'a',

1.6 style绑定

<p>style绑定</p>
			<span :style="styleStr">文本内容</span>


styleStr:'color:red',

二：指令

2.1 v-if

<p>v-if</p>
			<!-- 输入分数：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>

score:0,

2.2 v-show

<p>v-show</p>
请输入结果：<input v-model="showflag" />
<span v-show="showflag">show: 展示与否</span>
<span v-if="showflag">if: 展示与否</span>

showflag:true,

2.3 v-for

<p>v-for</p>
			<select>
				<option v-for="l in hobby" :value="l.id">{{l.name}}</option>
			</select>
			<br>
			<div v-for="l in hobby">
			<input type="checkbox" :value="l.id">{{l.name}}
			</div>
			
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return{
					score:0,
					showflag:true,
					hobby:[{
						id:1,
						name:'少爷',
						},
						{
							id:2,
							name:'罗恩',
							},
						{
							id:3,
							name:'赫敏',
							},
						{
							id:4,
							name:'波特',
							}
					]
				}
			}
		})
	</script>
</html>

单选

多选

三：过滤器

全局过滤器

Vue.filter('filterName', function (value) {

// value 表示要过滤的内容

});

局部过滤器

new Vue({

filters:{'filterName':function(value){}}

});

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：



{{ name | capitalize }}

 <!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: orange;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- {{msg|strSplit}} -->
			<!-- 过滤器的串联 -->
			{{msg|strSplit|strSplit2}}
			<!-- 过滤器的传参 -->
			{{msg|strSplit3(2,5)}}
			{{msg|strSplit3(1,4)}}
		</div>
	</body>
	<script type="text/javascript">
		Vue.filter('strSplit',function(value){
			debugger;
			console.log(value);
			return value.substring(0.5);
		})
		Vue.filter('strSplit2',function(value){
			debugger;
			console.log(value);
			return value.substring(0.5);
		})
		Vue.filter('strSplit3',function(value,a,b){
			debugger;
			console.log(value);
			return value.substring(a,b);
		})
		new Vue({
			el:'#app',
			data(){
				return{
					msg:'hello vue',
				}
			}
		})
	</script>
</html>

四：计算属性和监听属性

4.1计算属性

<p>计算属性</p>
 			请输入第一个数:<input v-model="x" /><br>
 			请输入第二个数:<input v-model="y" /><br>
 			结果为:{{addFlag}}
<script type="text/javascript">
 		new Vue({
 			el: '#app',
 			data() {
 				return {
 					x: 0,
 					y: 0,
computed: {
 				//计算属性
 				addFlag: function() {
 					return parseInt(this.x) + parseInt(this.y);
 				}
 			},

4.2监听属性

<p>监听属性</p>
			请输入千米:<input v-model="km" /><br>
			请输入米:<input v-model="m" /><br>

<script type="text/javascript">
 		new Vue({
 			el: '#app',
 			data() {
 				return {
					km:0,
					m:0
 				}
 			},
watch:{
				km:function(v){
					//:之前对应的是被监听的属性，v指的是被监听属性的
					// 当V对应的值发生变化的时候，会执行这个方法
					//v代表是千米
					debugger;
					console.log(this.v);
					this.m = parseInt(v)*1000
				},
				m:function(v){
					this.km = parseInt(v)/1000;
				}
			}

五：案例

<!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: orange;
 			}
 		</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>
 	</body>
 	<script type="text/javascript">
 		new Vue({
 			el: '#app',
 			data() {
 				return {
					maozidanjia:20,
					yifudanjia:30,
					kuzidanjia:40,
					maozishuliang:1,
					yifushuliang:1,
					kuzishuliang:1
 				}
 			},
			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.yifuxiaoji) + parseInt(this.maozixiaoji) + parseInt(this.kuzixiaoji);
				}
			}
 		})
 	</script>
 </html>