首页 > 其他分享 >Vue的基础指令

Vue的基础指令

时间:2022-08-29 22:55:25浏览次数:56  
标签:el Vue app 基础 text2 指令 new data

1.普通插值表达式插入数据

<body>
	<div id="app">
		<div>{{text1}}</div>
		<div>{{text2}}</div>
	</div>
</body>
<script>
	new Vue({
		el:"#app",
		data:{
			text1:"插入值一",
			text2:"插入值二"
		}
	})
</script>

2.文本指令 

  1.v-text

  v-text就相当于Dom中的innerText

<body>
	<div id="app">
		<div v-text="text1"></div>
		<div v-text="text2"></div>
		<div style="color: purple;">{{text1}}</div>
		<div style="font-weight: 800;">{{text2}}</div>
	</div>
</body>
<script>
	new Vue({
		el:"#app",
		data:{
			text1:"插入值一",
			text2:"插入值二"
		}
	})
</script>

  2.v-html

 

  v-html就相当于Dom中的innerHTML

<body>
	<div id="app">
		<div v-html="html1"></div>
		<div v-html="html2"></div>
		<div>{{html1}}</div>
		<div>{{html2}}</div>
	</div>
</body>
<script>
	new Vue({
		el:"#app",
		data:{
			html1:"666666",
			html2:"888888"
		}
	})
</script>

  3.v-pre

  加上v-pre属性的话就会被识别为文本,而不是js表达式

<body>
	<div id="app">
		<div v-pre=>{{pre1}}</div>
		<div v-pre=>{{pre2}}</div>
		<div>{{pre1}}</div>
		<div>{{pre2}}</div>
	</div>
</body>
<script>
	new Vue({
		el:"#app",
		data:{
			pre1:"99999",
			pre2:"77777"
		}
	})
</script>

 

  4.v-bind

  v-bind就是给所有标签绑定js变量

<body>
	<div id="app">
		<div>{{statuses[1].user.name}}</div>
		<img v-bind:src="statuses[9].user.profile_image_url">
		<div>{{statuses[1].text}}</div>
		<div>{{statuses[1].created_at}}</div>
		<img :src="statuses[9].user.profile_image_url" alt="">
          //可以用":"来代替v-bind: </div>
//这些都是obj对象的属性中的值 </body> <script> console.log(obj) new Vue({ el:"#app", data:obj }) </script>

 

标签:el,Vue,app,基础,text2,指令,new,data
From: https://www.cnblogs.com/forever-ljf/p/16637691.html

相关文章

  • 什么是vue⽣命周期?
    什么是vue⽣命周期?vue⽣命周期都有哪些钩⼦函数?这些钩⼦函数如何触发? 项⽬开发过程中,在⽣命周期⾥⾯都分别做过什么功能? ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺......
  • apache 设置中的两个指令 EnableMMAP/EnableSendfile
    apache设置中的两个指令EnableMMAP/EnableSendfile-unixboy-ITeye博客 https://www.iteye.com/blog/unixboy-702040apache中的目录为windows共享文件夹时,出......
  • 给vue单页面绑定快捷键
    created(){//添加快捷键document.addEventListener('keyup',this.handleKeyUp)},destroyed(){//删除快捷键document.removeEventListene......
  • 引入VUE的方式(8种)
    第一类:1、本地引入把vue的js文件下载下来引入   2、CDN引入把vue.js网址引入   3、把vue.js文件放在项目文件夹src中引入项目然后webpack打包 4、......
  • Vite 按需引入 Ant Design Vue 3.0
    Vite按需引入AntDesignVue3.0第一步下载:npmiunplugin-vue-components-D需要注意的是:Vite你可以用unplugin-vue-components来进行按需加载。但是此插件无法处......
  • webpack4.15.1 学习笔记(九) — 最最基础的插件使用
    目录html-webpack-pluginclean-webpack-pluginwebpack-manifest-pluginHotModuleReplacementPlugin(内置)处理webpack在编译过程中的某个特定任务的功能模块,plugins选......
  • Linux基础知识(13)- Docker (六) | 使用 Docker 安装常用应用程序
    本文演示使用Docker安装Ubuntu、CentOS、Nginx、Apache、Tomcat、Redis、MariaDB(MySQL)、Python、PHP和NodeJS。1.安装Ubuntu   Ubuntu是基于Debian的Li......
  • python基础-装饰器
    python基础-装饰器 什么是装饰器?不改变函数原来的调用方式动态地给函数添加功能 装饰器的原则是什么?装饰器遵循:开放封闭原则对添加新功能是......
  • python基础-生成器,列表推到式
    python基础-生成器,列表推到式 一. 生成器什么是生成器?.生成器实质就是迭代器.在python中有三种方式来获取生成器:通过生成器函数通过各种推导式来实......
  • python基础.内置函数(二),递归函数,二分法
    python基础.内置函数(二),递归函数,二分法  一.lamda匿名函数为了解决一些简单的需求而设计一句话函数 lambda表示的是匿名函数.不需要用def来声明, 一句话......