vue插值表达式的使用

vue的基本创建

1.首先要引入vue的类库。
2.定义一个vuejs管理的区域,在vue管理的区域内可以是使用vuejs特性,可以使用插值表达式,把vuejs管理的数据放渲染在页面上。
3.实例化vue对象:

  • 实例化的对象必须存在两个属性
    ①:el 选择器,表示vuejs管理的区域
    ②:data(对象) 表示的是vuejs可以操作的数据

实例:


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="box">div>
	body>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
	<script type="text/javascript">
	    //实例化vue
		var vm=new Vue({
			el:'#box',//vuejs管理的区域
			data:{
				//vuejs可操作的数剧
			}
		})
	script>
html>

插值表达式

完成vue的实例化后,就可以在定义好的vue操作区域内使用插值表达式了。

  • 首先我们要明白插值表达式是什么?
  1. 插值表达式是vue框架提供的指令

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="box">
			{{ demo }}
		div>
	body>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#box',
			data:{
				demo:'hi vuejs'//定义一个模型变量
			}
		})
	script>
html>

插值表达式中除了可以写模型变量还可写其他东西:

1.字面量

<body>
		<div id="box">
			{{ 'abc' }}
			{{ 123 }}
		div>
body>

2.四则运算

<body>
	<div id="box">
			
			{{ 1+2 }} 
			{{ 'hello' + 'word!' }} 
			{{ 10*2 }} 
	div>
body>

3.逻辑运算

 <body>
	<div id="box">
			{{  true&&false  }} 
			{{  true || false '  }} 
			{{  !true  }} 
	div>
body>

4.三目运算

<body>
	<div id="box">
			<p>{{ 20 > 18 ? '成年' : '未成年' }}p>  
	div>
body>

5.全局函数

<body>
	<div id="box">
			<p>{{ Math.random() }}p>
            <p>{{ parseInt(12.23) }}p>
	div>
body>

你可能感兴趣的:(Vue)