继续通过小案例来体验一些常用的指令, 以经典的todolist进行展示. 首先呢通过 v-for 指令进行dom循环.
v-for
通常是在循环dom的编写的同时遍历数据进行填充.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
data () {
return {
list: ['hello', 'world', 'vue', 'react']
}
},
template: `
<ul>
<li v-for="(item, index) of list">{{item}} {{index}}</li>
</ul>
`
}).mount('#root')
</script>
</body>
</html>
则显示结果如下:
* hello 0
* world 1
* vue 2
* react 3
v-model
用来对输入框的值和数据进行双向绑定 (共用一个数据)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
data () {
return {
inputValue: '',
list: []
}
},
methods: {
addItem () {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
template: `
<div>
<input v-model="inputValue" />
<button @click="addItem">增加</button>
<ul>
<li v-for="(item, index) of list">{{item}} {{index}}</li>
</ul>
</div>
`
}).mount('#root')
</script>
</body>
</html>
对于 v-for 的使用是极高频的, 但其实只需要了解其语法就可以了, 仅从工具使用的角度; 对于 v-model 同理, 理解输入框的值和数据用的值都用一个 inputValue 变量进行双向绑定, 或者说共享吧.这个特别高效. 以前用原生 js 来弄还是比较麻烦的, 又要处理 dom 又要处理数据. 通过 vue 这种工具就极大降低了开发的难度, 而且还特别好用.
标签：vue,dom,指令,list,初识,inputValue,vue3,model From： https://www.cnblogs.com/chenjieyouge/p/16614656.html