Vue_02_模板语法（上）

最新推荐文章于 2022-11-26 14:54:23 发布

阿立不油腻

最新推荐文章于 2022-11-26 14:54:23 发布

阅读量110

点赞数 1

文章标签： vue.js javascript css3

本文链接：https://blog.csdn.net/qq_58530605/article/details/121026001

版权

本文介绍了Vue的模板语法，包括文本和HTML插值、指令如v-if、v-for、v-bind、v-on、v-model的使用，动态参数的绑定，以及过滤器的创建和应用。同时，讲解了计算属性和监听属性在数据处理中的作用和区别。

摘要由CSDN通过智能技术生成

一、插值

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

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

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>day02_dzl1_插值</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
			<!--  Ctrl+k  格式化  -->
		
		
		<!-- 定义边界 -->
		<div id="app">
			<p>1.1.1文本</p>
			<h3>{
  {msg}}</h3>
			<p>1.1.2html串</p>
			<div v-html="htmlstr"></div>
			<p>1.1.3vue中的属性</p>
			<!-- 所有原生态的属性，要利用Vue的变量，都需要在对应的属性前加上 v-bind -->
			<a v-bind:href ="hrefstr">跳百度</a>
			<input v-bind:value="valuestr" />
			<P>1.1.4表达式:截取前四位，转大写</P>
			{
  {str.substring(0,4).toUpperCase()}}
			<p>1.1.5运算</p>
			李四：{
  {number+1}}
			{
  {ok ? 'yes' :'no'}}
			<p>1.1.6:拼接ID</p>
			<span :id="'books_id_'+id">aa</span>
		</div>
	</body>
	<script type="text/javascript">
		/* 绑定边界 Es6具体体现 */
		new Vue({
			el: '#app',
			data() {
				return {
					msg: '张三入门vue',
					htmlstr:'<h3 style="color:red;">这是一个张三的HTML片段</h3>',
					hrefstr:'http://www.baidu.com',
					valuestr:'1234',
					str:'JavaYYDS',
					number:90,
					ok:true,
					id:66
				};
			}
		})
	</script>
</html>