Vue 模板语法

最新推荐文章于 2023-12-22 16:24:28 发布

java男播完

最新推荐文章于 2023-12-22 16:24:28 发布

阅读量192

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/wx1762813417/article/details/100930720

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

模板语法

1. 插值

文本
{{msg}}
html
使用v-html指令用于输出html代码
属性
HTML属性中的值应使用v-bind指令
表达式
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}
< li v-bind:id="‘list-’ + id">我的Id是js动态生成的

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插值</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>

		<div id="app">
			<h3>文本</h2>
				{{msg}}

				<h3>使用v-html指令用于输出html代码</h3>
				<!-- 如果直接写 页面显示  <span style="color:blue">我是html</span>  -->
				{{html}}
				<!-- 我们只要 html 类容的话 需要 加一个属性 v-html ,属性里直接填 return 下的名字 -->
				<div v-html="html"></div>

				<h3>属性</h3>
				<input name="hobby" value="看书" />
				<!-- 需要 v-bind 属性  可以简写为 ：value  -->
				<input name="hobby" :value="val" />

				<h3>表达式</h3>
				{{str.substr(0,6).toUpperCase()}}<br>
				{{ number + 1 }}<br>
				{{ ok ? 'YES' : 'NO' }}<br>
				<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>


		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					msg   : '要插入的文本',
					html  : '<span style="color:blue">我是html</span>',
					val   : '篮球',
					str   : 'https://www.uc123.com/',
			        number: '1',
					ok    : false,
					id    : '9',
					
				}
			},
		})
	</script>
</html>

网页显示：
在这里插入图片描述

js动态生成id
在这里插入图片描述

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

2.指令

指的是带有“v-”前缀的特殊属性

核心指令: ( v-if | v-else |v-else-if )/ v-show / v-for / v-bind / v-on / v-model )

v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style=“display:none”
v-for：类似JS的遍历，
遍历数组: v-for=“item in items”, items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标
v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
v-for/v-model一起绑定[多选]复选框和单选框

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>指令</title>
	</head>
	<body>
		<div id="app">
			<h3>条件指令 if,elseif,else</h3>
			<div v-if="score > 90  ">A</div>
			<div v-else-if="score > 80  ">B</div>
			<div v-else-if="score > 70  ">C</div>
			<div v-else-if="score > 60  ">D</div>
			<div v-else="">E</div>
			<input v-model="score"/>
			
			<h3>条件指令 show</h3>
			<!-- 当输入框 的值等于1 就显示htmL值,反之不显示 -->
			<div v-show="msg == 1">需要展示的类容</div>
			<input v-model="msg" />
			
			<h3>条件指令 v-for</h3>
			<!-- 有一组复选框，想要获取复选框被选中的值 -->
			<h4 >    遍历数组</h4>
			<div v-for="item in vfor">
				<input type="checkbox" v-model="checkedVals" name="hobyy"  v-bind:value="item.id"/>{{item.name}}
			</div>
			<input v-model="checkedVals" />
			
			<h4>  遍历对象</h4>
			<div v-for="(value, key, index) in vfor">
				 {{ index }}. {{ key }} : {{ value }}
			</div>
		 
			<h4>下拉框</h4>
			<select name="likes" v-model="selectVals">
				<option v-for="item in vfor" :value="item.id" >{{item.name}}</option>
			</select>
			<input v-model="selectVals" />
			
			<h3>动态参数</h3>
			<button @[evname]="clickMe">点我啊</button>
			<input v-model="evname" />
			
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					score: 80,
					msg : '',
					vfor :[{
						id : 1,
						name :'亚索'
					},{
						id : 2,
						name :'德玛'
					},{
						id : 3,
						name :'剑圣'
					},{
						id : 4,
						name :'德邦'
					}],
					checkedVals :[],
					selectVals : '',
					evname : 'click'
				}
			},
			methods:{
				clickMe(){
					alert('动态参数我又来了');
				}
			}
		})
	</script>
</html>

运行结果：

在这里插入图片描述

3. 过滤器

全局过滤器
Vue.filter(‘filterName’, function (value) {
// value 表示要过滤的内容
});
局部过滤器
new Vue({
filters:{‘filterName’:function(value){}}
});
vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
在两个大括号中
{{ name | capitalize }}

在 v-bind 指令中
< div v-bind:id=“rawId | formatId”>

案例：网址截取进行大小转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<h3>局部过滤器的注册</h3>
			{{msg}}<br>
			{{msg | a}}<br>
			
			<h3>局部过滤器的串联</h3>
			{{msg}}<br>
			{{msg |a | b}}<br>
			
			<h3>全局过滤器的注册</h3>
			{{msg |a | b}}<br>
		</div>
	</body>
	<script type="text/javascript">
		Vue.filter("c",function(v){
			return v.substr(0,1).toUpperCase()+v.substr(1,17);
		});
		
		
		new Vue({
			el:'#app',
			data(){
				return{
					msg : 'https://www.baidu.com/',
				}
			},
			filters:{
				a(v){
					return v.substr(0,17).toUpperCase();
				},
				b(v){
					/* 网址前8个字符变小写，后面变大写 */
					return v.substr(0,8).toLowerCase()+v.substr(8,17).toUpperCase();
				}
			}
		})
		
	</script>
</html>

没有定义全局过滤器时
在这里插入图片描述

在这里插入图片描述
定义全局过滤器：

在这里插入图片描述

4. 计算属性

需要的属性：computed{}
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<h3>计算属性</h3>
			苹果单价：<input v-model="price" /><br />
			购买的数量 ：<input v-model="num" /><br />
			小计:{{total}}
			
			<h3>计算监听属性</h3>
			km：<input v-model="km" /><br />
			m ：<input v-model="m" /><br />
			
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el : '#app',
			data(){
				return{
					msg : '',
					price : 6,
					num : 2,
					km : 1,
					m  : 1000,
				}
			},
			computed:{
				total(){
					return this.price * this.num;
				}
			},
			watch:{
				km(v){
					this.m = v*1000;
				},
				m(v){
					this.km = v/1000;
				}
			}
		})
		
	</script>
</html>

在这里插入图片描述

计算属性实现简单的购物车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>购物车</title>
		<style>
			table tr td {
				height: 30px;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<table border="1px" width="60%" style="text-align: center;" cellpadding="0px" cellspacing="0px">
				<tr>
					<td>id</td>
					<td>商品</td>
					<td width="200px">价格</td>
					<td width="200px">数量</td>
					<td>小计</td>
				</tr>
				<tr >
					<td>1</td>
					<td>苹果</td>
					<td><input size="13" v-model="psum" /></td>
					<td><input size="13" v-model="pcount" /></td>
					<td>{{total1}}</td>
				</tr>
				<tr>
					<td>2</td>
					<td>香蕉</td>
					<td><input size="13" v-model="xsum" /></td>
					<td><input size="13" v-model="xcount" /></td>
					<td>{{total2}}</td>
				</tr>
				<tr >
					<td>3</td>
					<td>梨子</td>
					<td><input size="13" v-model="lsum" /></td>
					<td><input size="13" v-model="lcount" /></td>
					<td>{{total3}}</td>
				</tr>

				<tr>
					<td colspan="6"><span style="text-align: right;">总价{{sum}}</span></td>
				</tr>
			</table>
		</div>


	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					msg : '',
					lsum: 5,
					lcount: 1,
					xsum: 3,
					xcount: 1,
					psum: 2,
					pcount: 1
				}
			},
			computed:{
				//简单的购物车模拟
					total1(){
						return this.psum*this.pcount;
					},
					total2(){
						return this.xsum*this.xcount;
					},
					total3(){
						return this.lsum*this.lcount;
					},
					sum(){
						return this.total1+this.total2+this.total3;
					}
			}
		})
	</script>
</html>

在这里插入图片描述

java男播完

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 模板语法

模板语法1. 插值文本{{msg}}html使用v-html指令用于输出html代码属性HTML属性中的值应使用v-bind指令表达式Vue提供了完全的JavaScript表达式支持{{str.substr(0,6).toUpperCase()}}{{ number + 1 }}{{ ok ? ‘YES’ : ‘NO’ }}< li v-bind:id="‘lis...
复制链接

扫一扫