初学vue插值表达式和部分指令

最新推荐文章于 2024-04-29 21:35:15 发布

浮尘如梦106

最新推荐文章于 2024-04-29 21:35:15 发布

阅读量173

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_21903407/article/details/114994278

版权

初学vue插值表达式和部分指令的记录

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
  <style type="text/css">
   /*class绑定*/
  	.c{
  		color: red;
  	}
  	.f{
  		font-size: 30px;
  	}
  </style>
</head>
<body>
	<div id="app">
		<!-- 以下称为插值表达式 -->
		<h1>1、以下是插值表达式完成的</h1>
		{{user_data}}<br/> <!-- 可以写数值 -->
		{{cal>5?'大':'小'}}<br/>   <!-- 可以写运算 -->
		{{fun()}}<br/>   <!-- 可以调用函数 -->
		{{obj.name}}<br/>   <!--  可以调用对象 -->
		{{obj.fun()}}<br/>  <!-- 调用对象的方法 -->
        <h6>{{user_data}}</h6>  <!-- 插值表达式写在标签里 -->
        
         <h1>2、以下是指令完成的</h1>
		<!-- 以下为指令 -->
		<p v-if='a'>指令v-if是否显示</p>
		<div v-text='text'>哈哈 </div>
		<div v-html='html'></div>
		<h5>之后是插值表达式 指令v-text和v-html会覆盖元素里的内容 插值表达式是追加内容{{obj.name}}</h5>
		<img src="./img/a.jpg" width="50px">
		<img v-bind:src="imgpath" width="50px">
		<div v-bind:class="[vc,vf]">这是用v-bind:class指令</div>
		<div v-bind:style="[c,f]">这是用v-bind:style=[]数组写法</div>
		<div v-bind:style="{color:dc,fontSize:df+'px'}">这是用v-bind:style={}对象写法</div>
		<div :style="{color:dc,fontSize:df+'px'}">v-bind的简写  只要带有v-bind都可以用冒号:替代</div>


        <h1>3、单向数据绑定 通过app.b=更改值 app.属性=‘值’会更改输入框里的值 而输入框更改却不影响vue数据值</h1>
        <p>这是单向数据绑定输入框改变不会影响vue对象绑定的数据：{{b}}</p>
		<input type="text" :value="b" name="">

		<h1>4、双向数据绑定 输入框值更改会改变vue对象绑定的数据 vue绑定的数据更改同样会改变输入框的值 如下</h1>
	
		<p>这是双向数据绑定和输入框同步改变：{{sb}}</p>
		<input type="text" v-model="sb" name="">
			<h3 :style='r'>双向数据绑定的指令是：v-model='值' 该指令只适用于用户交互的输入框 如下单选框和复选框</h3>
        <br/>爱好：
		看书<input type="checkbox" name="" value="lookbook" v-model='hobby'>
		打球<input type="checkbox" name="" value="palyball" v-model='hobby'>
	    听歌<input type="checkbox" name="" value="lstenmusic" v-model='hobby'>
	    <p>显示选中的爱好:{{hobby}}</p>
	    <br/>
	    性别：
	    男<input type="radio" name="sex" value="男" v-model='sex1'>
	    女<input type="radio" name="sex" value="女" v-model='sex1'>
	    <p>显示选中的性别：{{sex1}}</p>
	</div>
<!-- <script src="./vue.js"></script> -->
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
	//app创建vue对象
	var app = new Vue({
		// 以下是插值表达式数据
         el:'#app',  //el绑定元素
         data:{       //所有的数据放在data对象下
         	user_data:'vue对象绑定变量',        //给元素传递的数据  user_data相当data的属性
         	cal:2,                           //{{cal}}
         	fun:function(){                 
         		return 'vue对象绑定函数'
         	},
         	obj:{
         		name:'vue对象绑定对象的属性',
         		fun:function(){
         			return 'vue对象绑定对象的方法'
         		}
         	},

            //以下是指令的数据
         	a:true,
         	text:'<h3>v-text指令原字符输出不解析  同时指令会覆盖原来元素里的内容</h3>',
         	html:'<h3>v-html指令对比v-text会解析再输出</h3>',
         	imgpath:'./img/a.jpg',   //v-bind:src='imgpath'
     
         	vc:'c',          //v-bind:class=[vc,vf]
         	vf:'f',          //v-bind:class=[vc,vf]
         	c:{               //v-bind:style=[c,f]  数组写法
         		color:'green'
         
         	},
         	f:{                     //v-bind:style=[c,f]  数组写法
         		fontSize:'20px'
         	},               
         	 dc:'orange',        //v-bind:style={color:dc,fontSize:df+'px'} 对象写法
         	df:20,

           //单向绑定数据
         	b:'单向数据绑定 通过app.b=更改值 会更改输入框里的值 而输入框更改却不影响vue数据值',  //v-bind:value='b'
            
           //双向绑定数据
         	sb:'双向数据绑定',            //v-model='sb'
         	r:{                   //v-bind:style='r'
            	color:'red'
            },
            hobby:[],          //v-model='hobby'
            sex1:''      //v-model='sex1'
         }

	})
	//单向数据改变
	app.b='已更改 单向数据绑定 通过app.b=更改值 app.属性=‘值’会更改输入框里的值 而输入框更改却不影响vue数据值';
</script>
</body>
</html>

浮尘如梦106

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学vue插值表达式和部分指令

初学vue插值表达式和部分指令的记录<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> /*class绑定*/ .c{ color: red; } .f{ font-size: 30px; } </style></
复制链接

扫一扫