生活随笔
收集整理的這篇文章主要介紹了
vue基本用法
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一、v-text與v-html.html
v-html 可以解析標簽，解析樣式,v-text不能解析，只能原樣輸出
二、v-bind綁定參數(shù)
v-bind簡寫方式
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
三、v-model雙向綁定
四、v-for
簡單用法
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>v-for </title><script type="text/javascript" src="js/vue-v2.6.10.js" ></script></head><body><div id="app"><ol><li v-for="o in user">{{o}}</li></ol></div></body><script type="text/javascript">new Vue({el:"#app",data:{user:{id:001,username:"willaim",password:"123",sex:"nan",age:20}}})</script>
</html>
2.操作對象
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>v-for </title><script type="text/javascript" src="js/vue-v2.6.10.js" ></script></head><body><div id="app"><ol><li v-for="o in user">{{o}}</li></ol><ol><li v-for="(key,value) in user">{{key+"::"+value}}</li></ol></div></body><script type="text/javascript">new Vue({el:"#app",data:{user:{id:001,username:"willaim",password:"123",sex:"nan",age:20}},})</script>
</html>
3.操作對象數(shù)組
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>v-for </title><script type="text/javascript" src="js/vue-v2.6.10.js" ></script></head><body><div id="app"><ol><li v-for="o in user">{{o}}</li></ol><ol><li v-for="(key,value) in user">{{key+"::"+value}}</li></ol><table><tr ><td>id</td><td>用戶名</td><td>密碼</td><td>性別</td><td>年齡</td></tr><tr v-for="user in userList"><td>{{user.id}}</td><td>{{user.username}}</td><td>{{user.password}}</td><td>{{user.sex}}</td><td>{{user.age}}</td></tr></table></div></body><script type="text/javascript">new Vue({el:"#app",data:{user:{id:001,username:"willaim",password:"123",sex:"nan",age:20},userList:[{id:001,username:"willaim",password:"123",sex:"nan",age:20},{id:002,username:"willaim-li",password:"456",sex:"nan",age:22}] },})</script>
</html>
五、v-if與v-show
v-if：判斷是否加載元素
v-show：展示樣式
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>v-if和v-show </title><script type="text/javascript" src="js/vue-v2.6.10.js" ></script></head><body><div id="app"><!--v-if: 都是可以決定標簽內(nèi)容是否可以顯示判斷后決定是否加載此標簽v-show: 都是可以決定標簽內(nèi)容是否可以顯示肯定會加載，使用樣式?jīng)Q定是否顯示適用于經(jīng)常切換元素顯示問題--><font v-if="seen">百度</font><font v-show="seen">谷歌</font><input type="button" value="切換" @click="fun1" /></div></body>
<script type="text/javascript">new Vue({el:"#app",data:{seen: false},methods:{fun1:function(){this.seen=!this.seen;}} })</script>
</html>
總結
以上是生活随笔為你收集整理的vue基本用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
