v-model

v-model是Vue中的指令，可以创建双向绑定。学习如何使用它。 v-model指令可以创建双向绑定。 你可以绑定一个表单输入元素，当用户改变字段的内容时，可以实时改变Vue的数据属性： <input v-model="message" placeholder="请输入消息"> <p>消息是：{{ message }}</p> <select v-model="selected"> <option disabled value="">选择一种水果</option> <option>苹果</option> <option>香蕉</option> <option>草莓</option> </select> <span>选择的水果：{{ selected }}</span> 常用的指令修饰符 如果只想在发生更改事件时更新模型，而不是在用户按下键时更新，可以使用v-model.lazy代替v-model。 当使用输入字段时，v-model.trim非常有用，因为它会自动去除输入内容的空格。 如果要接受数字而不是字符串，请确保使用v-model.number。 嵌套属性 假设你有一个购物车，并且有一个包含添加产品表单的组件： <template> <div> <h1>添加产品</h1> <label>名称</label>: <input> <label>描述</label>: <textarea></textarea> <button @click="addProduct">添加</button> </div> </template> <script> export default { name: 'AddProduct', data() { return { product: { name: '', description: '' } } }, methods: { addProduct() { console.log(this.product) } } } </script> 为了使表单更新product状态值的内部属性，你可以使用product.*： <label>名称</label>: <input v-model="product.name"> <label>描述</label>: <textarea v-model="product....

Vue.js 使用一種超集的 HTML 樣板語言。我們可以使用插值和指令。本文將解釋指令。 v-text v-once v-html v-bind 使用 v-model 雙向綁定 使用運算式 條件語句 循環 事件 顯示或隱藏 事件指令修飾符 自定義指令 在Vue.js 模板和插值中，我們看到了如何在 Vue 模板中嵌入數據。 本文將解釋 Vue.js 在模板中提供的另一種技術：指令。 指令基本上就像是添加在模板內的 HTML 屬性。它們都以 v- 開頭，表示它們是 Vue 的特殊屬性。 讓我們逐一看一下每個 Vue 指令的詳細用法。 v-text 可以使用 v-text 指令來替代插值，它執行相同的工作： <span v-text="name"></span> v-once 你知道 {{ name }} 是綁定到組件數據的 name 屬性的。當你的組件數據中的 name 發生變化時，Vue 會在瀏覽器中更新該值。 除非使用 v-once 指令，它基本上就像是一個 HTML 屬性： <span v-once>{{ name }}</span> v-html 當你使用插值來打印數據屬性時，HTML 會被轉義。這是 Vue 自動保護免受 XSS 攻擊的一種很好的方式。 然而，有時你想要輸出 HTML 並讓瀏覽器解釋它。你可以使用 v-html 指令：...