13-组件中使用文本插值

最新推荐文章于 2022-04-24 23:22:30 发布
最新推荐文章于 2022-04-24 23:22:30 发布
阅读量110 收藏
点赞数
分类专栏： VUE基础语法 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52135717/article/details/109743553
版权

13-组件中使用文本插值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
			<cpn3></cpn3>
		</div>
		<!-- 分离式写法，能够更好的提示html代码和使得界面的整洁 -->
		<template id="cpn1">
			<div>    
				<h1>{{text1}}</h1>
			</div>
		</template>
		
		<!-- 如果想要在组件中调用文本插值{{}},则需要在创建组件的时候在component中加入data(){return{}} -->
		<template id="cpn2">
			<div>
				<h1>{{text2}}</h1>
			</div>
		</template>
		
		
		
		<script>
			Vue.component('cpn',{
				template: '#cpn1',
				data(){
					return{
						text1:'标题'
						
					}
				}
			})
			
			
			const app = new Vue({
				el:"#app",
				data(){
					return{
						
					}
				},
				components:{
					'cpn3':{
						template:'#cpn2',
						data(){
							return{
								text2:'主题'
								
							}
						}
					}
				}
			})
		</script>
	</body>
</html>
weixin_52135717
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端小课堂1——文本插值，指令
m0_56294528的博客
04-08 1372
文本插值，指令
Vue自定义组件插入值
anshaobiao6449的博客
02-03 378
我们自定义组件的时候有时候需要往组件里面插一些内容： //定义一个组件test，插值内容用slog来代替 export default { name: 'test', template:` <div> <div>这里是test组件</div> <slo...
09Vue - 模板语法（插值-文本）
阿甘兄
07-26 472
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 如果你熟悉虚拟 D...
C# $ 特殊字符将字符串文本标识为内插字符串
allway2的博客
03-04 677
$特殊字符将字符串文本标识为内插字符串。 内插字符串是可能包含内插表达式的字符串文本 。 将内插字符串解析为结果字符串时，带有内插表达式的项会替换为表达式结果的字符串表示形式。 从 C# 6 开始可以使用此功能。 字符串内插为格式化字符串提供了一种可读性和便捷性更高的方式。 它比字符串复合格式设置更容易阅读。 比较一下下面的示例，它使用了这两种功能产生相同的输出： C#复制运行 string name = "Mark"; var date = DateTime.Now; // Composite.
vue ,solt 插值组件新内容
weixin_34001430的博客
01-06 177
11 转载于:https://www.cnblogs.com/blccy/p/8215399.html
vue-数据绑定(文本插值/v-bind/v-html)
bakelFF的博客
04-24 537
插值 文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值： <span>Message: {{ name }}</span> <script> new Vue({ el: '#app', data: { name: '小白' } }) </script> 但是此语法不能用在html元素的属性上. 原始 HTML 若..
p13-24freemaker.pdf
12-10
FreeMarker 是一款 模板引擎： 即一种基于模板和要改变的数据， 并用来生成输出文本 (HTML 网页，电子邮件，配置文件，源代码等)的通用工具。 它不是面向最终用户的，而 是一个 Java 类库，是一款程序员可以嵌入他们...
react-native-animate-number:用于数字动画的可定制React本机组件
05-30
React原生动画编号 用于数字动画的可定制React本机组件。安装$ npm install react-native-animate-number用法 import AnimateNumber from 'react-native-animate-number'例子基本的唯一需要的属性是value ，当此属性...
VUE面试题，Vue是一套构建用户界面的前端框架 它采用了组件化、模块化的设计,使得开发者可以灵活地组合和重用组件
03-28
答：{{}} 文本插值、v-bind属性绑定、v-model双向数据绑定。 4. Vue的条件渲染有哪些方式? 答：v-if、v-else-if、v-else、三元表达式、条件运算符等。 5. Vue的循环渲染有哪些方式? 答：v-for循环、template模板渲染...
Vue.js 模板语法
12-13
Vue.js 模板语法 ...数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值： 文本插值 {{ message }} Html 使用 v-html 指令用于输出 html 代码： v-html 指令 new Vue({ el: '#app'
易语言程序免安装版下载
04-07
　静态编译后的易语言EXE/DLL之间不能再共享譬如窗口、窗口组件等类似资源，对于已经静态连接到一个EXE/DLL中的支持库，该支持库中的数据或资源将不能再被其它EXE/DLL中所使用的同名支持库访问。这是因为代码被分别...
vue知识点的整理
qq_41770595的博客
10-15 266
Vue 官网 中文版本 渐进式 JavaScript 框架 Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性（Object.defineProperty()）。 版本：Vue 2.x 创建实例 // mvvm const vm = new Vue({ el: '#app', // element - View, data: { // 数据 - Model message: 'hello' },
只在关闭浏览器时清除localStorage的方法
weixin_52135717的博客
12-07 3120
只在关闭浏览器时清除localStorage的方法 window.onbeforeunload = function () { if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey) { var storage = window.localStorage; //方法
21-router-link的补充（转换成其他，如按钮）
weixin_52135717的博客
11-23 636
21-router-link的补充（转换成其他，如按钮） <template> <div id="app"> <router-link to="/home" tag="button">首页</router-link><br /> <router-link to="/about" tag="div">关于</router-link> <router-view></router-view&
20-前端路由相关配置
weixin_52135717的博客
11-23 291
20-前端路由相关配置 第一步在router创建路由index.js文件,并且进行路由的配置 //配置相关路由的信息 import VueRouter from 'vue-router' import Vue from 'vue' import Home from '../components/Home.vue' import About from '../components/About.vue' //1.通过vue.use(插件),安装插件 Vue.use(VueRouter) //2.创建路由对象
15-子传父（自定义组件，this.$emit(方法,需要传递的参数)）
weixin_52135717的博客
11-18 288
15-子传父（自定义组件） <!DOCTYPE html> <html> <head> <script src="./js/vue.min.js"></script> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- 使用V-ON调用方法 --&g
7-VUE基础项目练习(购物车)
weixin_52135717的博客
11-16 234
VUE基础项目练习(购物车) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./js/vue.min.js"></script> <title></title> </head> <body> <div id="app"> <div v-if="books.le
14-父子组件通讯，父传子（props）
weixin_52135717的博客
11-17 175
14-父子组件通讯，父传子（props） <!DOCTYPE html> <html> <head> <script src="./js/vue.min.js"></script> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <cpn :cmovies
vue disabled属性可以在插值中使用吗
最新发布
06-02
可以，在Vue中，disabled属性可以在插值中使用。例如，可以在模板中使用v-bind指令将disabled属性绑定到组件的数据属性上，然后在插值中使用该属性，如下所示： ```html <template> <button :disabled="isDisabled">{{ buttonText }}</button> </template> ``` 在上面的示例中，isDisabled是组件的一个数据属性，可以根据需要设置它的值，buttonText也是组件的一个数据属性，用于显示按钮文本。通过使用v-bind指令将disabled属性绑定到isDisabled属性上，可以根据需要启用或禁用按钮。同时，在插值中使用buttonText属性可以动态地显示按钮文本。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值