Vue基础语法-插值操作

Vue基础语法

插值操作

1. 插值运算符

• 语法： {{数据}}
  插值运算符可以显示也可以对数据进行计算
• 代码：

  <div id="app">
  	<h2>{{firstName}} {{lastName}}</h2>
  	<h2>年龄：{{count*2}}</h2>
  </div>
  <script type="text/javascript">
  	var app=new Vue({
  		el:"#app",
  		data:{
  			firstName:"张",
  			lastName:"三",
  			count:10
  		}
  	})
  </script>
  

* v-once

v-once这个指令后面不需要跟任何表达式,指令表示元素和组件之间只会渲染一次,不会随着数据的改变而改变

• 代码：

  <div id="app">
    	<h2>{{firstName}} {{lastName}}</h2>
    	<!-- 下面加了 v-once 后 如果在console中改变app.firstName="李" 上面代码的会改变firstName的值-->
    	<h2 v-once>{{firstName}} {{lastName}}</h2> 
    </div>
    <script type="text/javascript">
    	var app=new Vue({
    		el:"#app",
    		data:{
    			firstName:"张",
    			lastName:"三",
    		}
    	})
    </script>
  

* v-html

v-html可以输出html格式的数据。

• 代码：

  <div id="app">
    	<!-- 下面这个会直接输出htmlData的数据,输出的是一些代码 -->
    	<h2>{{htmlData}}</h2>
    	<!-- 下面这个会输出htmlData的数据,但是不是输出的代码,输出的是一些红色的字 -->
    	<h2 v-html="htmlData"></h2>
    </div>
    <script type="text/javascript">
    	var app=new Vue({
    		el:"#app",
    		data:{
    			htmlData:"<p style='color:red'>这是一个html代码</p>"
    		}
    	})
    </script>
  

  输出：

* v-text

v-text作用和插值运算符比较类似,都是用于将数据显示在页面上,通常发v-text用于接受一个String类型,v-text会替换标签内的内容
* 代码

  <div id="app">
		<!-- 可以输出String -->
		<h2 v-text="name"></h2>
		<!-- 也可以输出数字  也可以计算 -->
		<h2 v-text="count * 2"></h2>
		<!-- 这样的写法v-text会替换标签的内容 -->
		<h2 v-text="name">Hello</h2>
	</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				name:"Vue",
				count:10,
			}
		})
	</script>