文章有誤請指正，如果覺得對你有用，請點(diǎn)三連一波，蟹蟹支持?
?????????
???????????????? ???????? ?
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
????????????? ????????????
??????? 不能 ??? ????????
??????? 白嫖 ????????????
?????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
?????????????????????????
????????????????????????
提示：以下是本篇文章正文內(nèi)容
V u e j s Vuejs Vuejs
簡介 ： Vue 是一套用于構(gòu)建用戶界面的 漸進(jìn)式 框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。
- 官方
- 中文 ： https://cn.vuejs.org/
- 英文 ： https://vuejs.org/
- Vue2API : https://v2.cn.vuejs.org/
- Vue2 相關(guān)包 ： https://github.com/vuejs/awesome-vue
- Vue2 入門安裝官方 ：https://v2.cn.vuejs.org/v2/guide/installation.html
- Vue 相關(guān)插件 ： https://awesomejs.dev/for/vue/
收集表單數(shù)據(jù)
— 代碼演示 ??
<!--
收集表單數(shù)據(jù)：
若：<input type="text"/>，則v-model收集的是value值，用戶輸入的就是value值。
若：<input type="radio"/>，則v-model收集的是value值，且要給標(biāo)簽配置value值。
若：<input type="checkbox"/>
1.沒有配置input的value屬性，那么收集的就是checked（勾選 or 未勾選，是布爾值）
2.配置input的value屬性:
(1)v-model的初始值是非數(shù)組，那么收集的就是checked（勾選 or 未勾選，是布爾值）
(2)v-model的初始值是數(shù)組，那么收集的的就是value組成的數(shù)組
備注：v-model的三個(gè)修飾符：
lazy：失去焦點(diǎn)再收集數(shù)據(jù) v-model.lazy
number：輸入字符串轉(zhuǎn)為有效的數(shù)字 v-model.number
trim：輸入首尾空格過濾
v-model.xxx="xxx"
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>收集表單數(shù)據(jù)</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 準(zhǔn)備好一個(gè)容器-->
<div id="root">
<form @submit.prevent="submit">
賬號(hào)：<input type="text" v-model="userInfo.username">
<br /><br />
密碼：<input type="password" v-model="userInfo.password">
<br /><br />
性別：男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
<br /><br />
愛好：抽煙 <input type="checkbox" v-model="userInfo.hobby" value="smoke">
喝酒 <input type="checkbox" v-model="userInfo.hobby" value="drink">
開車 <input type="checkbox" v-model="userInfo.hobby" value="drive">
<br /><br />
所屬校區(qū)：<select v-model="userInfo.city">
<option value="">請選擇校區(qū)</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武漢</option>
</select>
<br /><br />
其他信息：<textarea v-model="userInfo.other" cols="30" rows="10"></textarea>
<br /><br />
<input v-model="userInfo.agree" type="checkbox">閱讀并接受<a href="http://www.baidu.com">《用戶協(xié)議》</a>
<br /><br />
<button>提交</button>
</form>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
userInfo: {
username: '',
password: '',
sex: '',
hobby: [],
city: '',
other: '',
agree: false,
}
},
methods: {
submit() {
console.log(this.userInfo)
}
}
})
</script>
</body>
</html>
效果
過濾器 使用
- 理解過濾器
- 功能: 對要顯示的數(shù)據(jù)進(jìn)行特定格式化后再顯示
- 注意: 并沒有改變原本的數(shù)據(jù), 是產(chǎn)生新的對應(yīng)的數(shù)據(jù)
— 代碼演示 ??
<!--
過濾器：
定義：對要顯示的數(shù)據(jù)進(jìn)行特定格式化后再顯示（適用于一些簡單邏輯的處理）。
語法：
1.注冊過濾器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用過濾器：{{ xxx | 過濾器名}} 或 v-bind:屬性 = "xxx | 過濾器名"
備注：
1.過濾器也可以接收額外參數(shù)、多個(gè)過濾器也可以串聯(lián)
2.并沒有改變原本的數(shù)據(jù), 是產(chǎn)生新的對應(yīng)的數(shù)據(jù)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>過濾器</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
<!-- 準(zhǔn)備好一個(gè)容器-->
<div id="root">
<h2>顯示格式化后的時(shí)間</h2>
<!-- 計(jì)算屬性實(shí)現(xiàn) -->
<h3>現(xiàn)在是：{{fmtTime}}</h3>
<!-- methods實(shí)現(xiàn) -->
<h3>現(xiàn)在是：{{getFmtTime()}}</h3>
<!-- 過濾器實(shí)現(xiàn) -->
<h3>現(xiàn)在是：{{time | timeFormater}}</h3>
<!-- 過濾器實(shí)現(xiàn)（傳參） -->
<h3>現(xiàn)在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
<h3 :x="msg | mySlice">張學(xué)友</h3>
</div>
<div id="root2">
<h2>{{msg | mySlice}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//全局過濾器
Vue.filter('mySlice', function (value) {
return value.slice(0, 4)
})
new Vue({
el: '#root',
data: {
time: 1621561377603, //時(shí)間戳
msg: '你好，張學(xué)友'
},
computed: {
fmtTime() {
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
methods: {
getFmtTime() {
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
//局部過濾器
filters: {
timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
// console.log('@',value)
return dayjs(value).format(str)
}
}
})
new Vue({
el: '#root2',
data: {
msg: 'hello,bineve!'
}
})
</script>
</html>
C o o k i e Cookie Cookie 影響
文章來源：http://www.zghlxwxcb.cn/news/detail-499957.html
總結(jié)
以上是個(gè)人學(xué)習(xí)Vue的相關(guān)知識(shí)點(diǎn)，一點(diǎn)一滴的記錄了下來，有問題請?jiān)u論區(qū)指正，共同進(jìn)步，這才是我寫文章的原因之，如果這篇文章對您有幫助請三連支持一波文章來源地址http://www.zghlxwxcb.cn/news/detail-499957.html
到了這里，關(guān)于VUE L 表單數(shù)據(jù)&過濾器 ⑨的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
