Vue.js中的v-bind和v-model区别

最新推荐文章于 2024-08-11 22:10:39 发布

bailaoshi666

最新推荐文章于 2024-08-11 22:10:39 发布

阅读量753

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/bailaoshi666/article/details/100071107

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

v-bind属性绑定

	<div id="div1">
		<a v-bind:href="page">12306</a>
	</div>
	
	
	<script>
		
		new Vue({
			el:'#div1',
			data:{
				page:'http://12306.com'
			}
		})
		
	</script>

v-model双向绑定

	<div id="div1">
		<table align="center">
			<tr class="firstLine">
				<td>视图类型</td>
				<td>输入数据</td>
				<td>绑定到Vue上的数值</td>
			</tr>
			<tr>
				<td>
					单行文本
				</td>
				<td>
					<input v-model="input" placeholder="输入数据" />
				</td>
				<td>
					<p>{{input}}</p>
				</td>
			</tr>
			<tr>
				<td>
					多行文本
				</td>
				<td>
					<textarea v-model="textarea" placeholder="输入数据"></textarea>
				</td>
				<td>
					<p>{{ textarea}}</p>
				</td>
			</tr>
			<tr>
				<td>
					单个复选框
				</td>
				<td>
					<input type="checkbox" id="checkbox" v-model="checked" />
				</td>
				<td>
					<p>{{checked}}</p>
				</td>
			</tr>
			<tr>
				<td>
					多个复选框	
				</td>
				<td>
					<input type="checkbox" id="teemo" value="temmo" v-model="checkedes" />
					<label for="teemo">temmo</label>
					<input type="checkbox" id="gareen" value="gareen" v-model="checkedes" />
					<label for="gareen">gareen</label>
					<input type="checkbox" id="annie" value="annie" v-model="checkedes" />
					<label for="annie">annie</label>
				</td>
				<td>
					<p>{{checkedes}}</p>
				</td>
			</tr>
			 <tr>
            <td>
                	单选按钮
            </td>
            <td>
              <input type="radio" id="one" value="One" v-model="radio">
              <label for="one">One</label>
              <br>
              <input type="radio" id="two" value="Two" v-model="radio">
              <label for="two">Two</label>
            </td>
            <td>
                <p>{{ radio }}</p>   
            </td>
        </tr>
        <tr>
            <td>
               	 单选选择框
            </td>
            <td>
              <select v-model="selected" size="5">
                <option disabled value="">请选择</option>
                <option>AD</option>
                <option>AC</option>
                <option>ADC</option>
              </select>
            </td>
            <td>
                <p>{{ selected }}</p>   
            </td>
        </tr>
        <tr>
            <td>
              	  多选选择框
            </td>
            <td>
              (通过ctrl或者shift进行多选)<br>
              <select v-model="selecteds" multiple size="5">
                <option disabled value="">请选择</option>
                <option>AD</option>
                <option>AC</option>
                <option>ADC</option>
              </select>
            </td>
            <td>
                <p>{{ selecteds }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                单个复选框
            </td>
            <td>
                默认值是true或者false,也可以修改为自定义的值<br>
                <input type="checkbox" id="toggle" true-value="yes" false-value="no" v-model="toggle">
            </td>
            <td>
                <p>{{ toggle }}</p>   
            </td>
        </tr>       
		</table>
	</div>
	
	
	<script>
		
		new Vue({
			el:'#div1',
			data:{
			input:'',
          	textarea:'',
          	checked:'',
          	checkedes:[],
          	radio:'',
          	selected:'',
          	selecteds:[],
          	toggle:'',
           
      		}
		})
		
	</script>