Vue-数据渲染

Vue-数据渲染

1. 普通渲染

- 语法1 {{}}
- 语法2 <span v-text="msg"><span>

<!-- view -->
		<div id="app">
			{{msg}}
			
			<p>
				<span>{{msg}}</span>
			</p>
			<p>
				<span v-text="msg"></span>
			</p>
		</div>
		

		<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//model
			var data = {
				msg:"hello world"
			}
			
			//viewModel
			var app = new Vue({
				el:"#app",
				data:data
			})
			
		</script>

2.html渲染

-语法 v-html
          <p  v-html='content'></p>

  <!-- view -->
   	<div id="app">
   		
   		<p>{{content}}</p>
   		
   		<p v-html='content'></p>
   		
   	</div>
   	

   	<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
   	
   	<script type="text/javascript">
   		
   		//model
   		var data = {
   			msg:"hello world",
   			content:`<ul>
   						<li>11</li>
   						<li>22</li>
   						<li>33</li>
   					</ul>`
   		}
   		
   		//viewModel
   		var app = new Vue({
   			el:"#app",
   			data:data
   		})
   		
   	</script> 

3.属性渲染

-语法 v-bind:属性名=“变量名”
          <a v-bind:href="url">百度</a>

<!-- view -->
		<div id="app">	
			<p>
				<a v-bind:href="url">百度</a>
			</p>
			
			<p>
				<a :href="url">百度</a>
			</p>
			
		</div>
		

		<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//model
			var data = {
				msg:"hello world",
				url:"http://www.baidu.com"
			}
			
			//viewModel
			var app = new Vue({
				el:"#app",
				data:data
			})
			
		</script>

4.class渲染

  -语法 v-bind:class=“表达式”

<style>
			.s1{
				color: #fff;
			}
			.s2{
				background: #f90;
			}
		</style>
<!-- view -->
		<div id="app">
			
			<p class="s1 s2">{{msg}}</p>

			<p :class="'s1 s2'">{{msg}}</p>

			<p v-bind:class="'s1 s2'">{{msg}}</p>

			<p :class="['s1', 's2']">{{msg}}</p>

			<p :class="{'s1':true, 's2':true}">{{msg}}</p>

			<p :class="q1">{{msg}}</p>
		</div>
		

		<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//model
			var data = {
				msg:"hello world",
				q1:['s1', 's2']
			}
			
			//viewModel
			var app = new Vue({
				el:"#app",
				data:data
			})
			
		</script>

5.循环渲染

-语法 v-for
-格式 v-for="(item,index) in list"

<!-- view -->
		<div id="app">
			<ul>
				<li v-for="item in list1">
					{{item}}
				</li>
			</ul>


			<ul>
				<li v-for="(item,index) in list1">
					{{item}} {{index}}
				</li>
			</ul>

			<ul>
				<li v-for="item in list2">
					{{item.name}} 
					{{item.age}} 
				</li>
			</ul>

			<ul>
				<li v-for="(value,key) in list3">
					{{key}} = {{value}} 
				</li>
			</ul>
			
		</div>
		

		<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//model
			var data = {
				list1:[
					111111,
					22222222,
					3333333,
					4444444
				],
				list2:[
					{
						name:"qqqq",
						age:13
					},
					{
						name:"www",
						age:14
					},{
						name:"eeee",
						age:17
					}
				],
				list3:{
					"name":"我最强",
					"size":"333M"
				}
			}
			
			//viewModel
			var app = new Vue({
				el:"#app",
				data:data
			})
			
		</script>

6.条件渲染

-语法 v-if=“表达式” 或 v-else

<!-- view -->
		<div id="app">
			<button @click="dealClick">显示</button>
			<div v-if="isshow">111111111</div>
			<div v-else>22222222222</div>
			
		</div>
		

		<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//model
			var data = {
				msg:"hello world",
				isshow:false
			}
			
			//viewModel
			var app = new Vue({
				el:"#app",
				data:data,
				methods:{
					dealClick(){
						this.isshow = !this.isshow
					},
				}
			})
			
		</script>

7.样式渲染

- 普通: style=""
- 语法: v-bind:style="表达式"	
- 案例1: v-bind:style=" '' "
- 案例2: v-bind:style=" {} "
- 语法3: v-bind:style=" 变量 "
- 简写语法: style=""

<div id="app">
			<p style="color: red">{{msg}}</p>

			<p :style="'color: red'">{{msg}}</p>

			<p :style="{color: 'red'}">{{msg}}</p>

			<p :style="q">{{msg}}</p>
			
		</div>
		

		<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//model
			var data = {
				msg:"hello world",
				q:{color: 'red'}
			}
			
			//viewModel
			var app = new Vue({
				el:"#app",
				data:data
			})
			
		</script>

8.输入框双向绑定

-语法 v-model

<!-- view -->
		<div id="app">
			<p>
				姓： <input type="text" v-model="xing">
			</p>
			<p>
				名： <input type="text" v-model="ming">
			</p>
			<p>
				姓名：{{xing+""+ming}} 
			</p>

			<button @click="dealReset">重置</button>
			
		</div>
		

		<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//model
			var data = {
				xing:"",
				ming:""
			}
			
			//viewModel
			var app = new Vue({
				el:"#app",
				data:data,
				methods:{
					dealReset(){
						this.xing="",
						this.ming=""
					}
				}
			})
			
		</script>