avue 实现下拉框事件 自动填充其他框_Vue 模板语法、事件和表单使用

模板语法

• 文本绑定，两个大括号，中间加上data里面的数据，message里面不仅可以是变量还可以是表达式

// 变量 {{ message }}
// 表达式 {{ number + 1}}

​

• JS表达式(计算、拼接、只能是单个表达式)
• 插入HTML代码(慎用！防止XSS攻击 )，我们可以直接在data里面定义html代码，但是它存在一个安全隐患，比如我们将下面的 dangerHTMl: "0085" 这句代码改变一下 dangerHTML: "0085" ，这时候的当我们点击时它执行了它里面的一个代码会弹出一个框，这是很危险的。像很多个XSS攻击就是用的这种方法，所以对于v-html我们还是要慎用。

0085"}

• 绑定，把data里面的数据绑定到元素的属性上，最常见的就是id

当data里面的数据改变时，它的Id也会随之改变。

changeId

​methods: { changeId: function() { this.id = 'newId'; }}

除了Id的绑定之外，还有其他的一些绑定：

• v-bind:disabled => :disabled，一个元素的属性
• 常用于表单，比如一些输入框，按钮，如下：这个时候的按钮就是一个不可点击的状态了。

changeId

• v-bind:href 简写 :href，链接
• v-on:click 简写 @click，点击

计算属性(缓存机制)

 data: { json: { key1: 1, key2: 2 } }, methods: { ... computed: { getJsonkey1: function() { return this.json.key1; } }, // 计算属性的缓存需要借助watch函数的监听 watch: { json: { handler: function(newVal,preVal){ console.log(JSON.stringify(preVal)); console.log(JSON.stringify(newVal)); }, deep: true, } } }

在vue里面监听json需要深度监听，因为它们是在同一个内存空间里面，地址是一样的。

这个时候打印出来的，我们会发现它们的新值和旧值都是一样的，这是由于它们是同一个内存地址我们访问时值已经改变。如果我们要改变两次的值不一样，那么我们需要用到计算属性里面的缓存。

比如先不监听json，而是监听getJsonkey1的方法，将watch的json变成getJsonkey1，这样的话我们就可以得到前后的两个值。

条件渲染

• v-if，判断元素是否要渲染，会复用元素(不想复用需要添加key)
• v-else-if
• v-else
• if else if else

testVIf: 'A',​ABchangeInputValuedata: { ... inputValue: 10805,}methods: { ... // 当我们点击按钮时，触发changeInputValue，实现累加 changeInputValue: function() { this.inputValue++; }}watch: { ... inputValue: function() { console.log(this.inputValue); }}

复选框：

​data: { // 默认选中 checkboxValue: true}