vue模板语法一

最新推荐文章于 2022-12-23 12:23:21 发布

墨江21

最新推荐文章于 2022-12-23 12:23:21 发布

阅读量146

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_46241057/article/details/108180691

版权

前端专栏收录该内容

7 篇文章

订阅专栏

vue模板语法

文本
html
属性
表达式
指令

文本

<p>1.1 html title={{title}},{{ts}}</p>
<script type="text/javascript">
		var vm=new Vue({
			el:'#acc',
			data:function(){
				return{
					title:'hello',
					ts:new Date().getTime()
				}
			}
			
		})
</script>

html

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

<div v-html="html"></div>
<script type="text/javascript">
		var vm=new Vue({
			el:'#acc',
			data:function(){
				return{
					html:'<input type="text" value=0>'
				}
			}
		})
</script>

属性

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

<div>
	<a href="href">百度</a>
	<a v-bind:href="href">百度</a>
	<input type="button" value="点击" v-on:click="onClick" />
</div>
<script type="text/javascript">
		var vm=new Vue({
			el:'#acc',
			data:function(){
				return{
					href:'http://www.baidu.com'
				}
			},
			methods:{
				onClick:function(){
					alert(111)
				}
			}
		})
</script>

表达式

Vue提供了完全的JavaScript表达式支持

<!-- 截取，转大写 -->
{{str.substr(0,6).toUpperCase()}}
<!--  -->
{{ number + 1 }}
<!-- 三元运算 -->
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
<script type="text/javascript">
		var vm=new Vue({
			el:'#acc',
			data:function(){
				return{
					str:'hello vue',
					number:10,
					ok:true,
					id:20
				}
			}
		})
</script>

指令

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="acc">
			<!-- 插值 -->
			<ul>
				<li>
					<p>
						1.1 html title={{title}},{{ts}}
					</p>
				</li>
				<li>1.2 v-if|v-else|v-else-if</li>
				<div v-if="sex=='boy'">
					Beautiful boy
				</div>
				<div v-else-if="sex=='girl'">
					Domineering girl
				</div>
				<div v-else>
					children
				</div>
				<li>1.3 v-show</li>
				<input type="checkbox" v-model="show" />隐藏或显示
				<div v-show="show">
					Domineering girl
				</div>
				<li>1.4 v-for</li>
				<div v-for="st in students">
					{{st.name}}
				</div>
				<li>v-model/v-forf</li>
				<div v-for="st in students">
					<input type="checkbox" v-model="st.id" />{{st.name}}
				</div>
				ids={{ids}}
				<li>监听属性</li>
				KB:<input type="text" name="kb" v-model="kb"/><br />
				MB:<input type="text" name="mb" v-model="mb"/><br />
				<div>
					var 作用于整个vm 全局变量定义
					let 作用于最近的一对{} 局部变量定义
					常用let来声明对象，避免用var全局变量导致数据的污染
				</div>
				<a v-bind:[attributename]="url">百度</a>
			</ul>
		</div>
		
	</body>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#acc',
			data:function(){
				return{
					title:'hello',
					ts:new Date().getTime(),
					sex:'no girl',
					show:false,
					students:[
						{'id':'1','name':'zs','age':12},
						{'id':'2','name':'ww','age':16},
						{'id':'3','name':'ls','age':13},
					],
					ids:[],
					kb:1024,
					mb:1,
					attributename:'href',
					url:'https://www.baidu.com'
					
					
					
					
				}
			},
			methods:{
				
			},
			watch:{
				kb:function(v){
					this.mb=v/1024;
				},
				mb:function(v){
					this.kb=v*1024;
				}
			}
		})
	</script>
</html>