vue 和react中的v-html，以及双向绑定，和点击事件的区别

在react中的dangerouslySetInnerHTML

export default class App extends Component {
state = {
msg : <p> 这里是一些html标签的内容，需要使用模板字符串
}
render () {
return (
< div>
{/* 使用规则，以对象的形式，key值 __html (俩个下划线) */}
<div dangerouslySetInnerHTML = {{ __html : this.state.msg }}>
< /div>
< /div>
)}}

在vue中的v-html

没有加v-html，里面的内容就会被当做变量解析，如果想要得到里面的数据，而不是让他解析，就需要加上v-html

< p>Using mustaches: {{ rawHtml }}< /p>
< p>Using v-html directive: < span v-html=“rawHtml”>< /span>< /p>

在vue中要写入标签格式解析需要使用vue.compile(template）
var res = Vue.compile(’< div>< span>{{ msg }}< /span>< /div>’)

React 中的点击事件

点击事件方法1

<button onClick = { () => {
this.setstate( {
count : this.state.count + 10
})></ button>

点击事件方法2

<button onClick = { this.add } > </ button>
//将点击事件放在外部
add = () =>{//为什么是箭头函数，为了解决this指向
this.setState({
count: this.state.count + 100
})
}

点击事件方法3

非箭头函数,需要使用bind绑定this，否则this会指向未定义
< button onClick = { this.add.bind(this) } >< /button>
add () {
console.log(‘aaa’)
}

点击事件4

如果this.add上面没有使用bind绑定this
constructor ( props) {
super ( props )
this.addfn = this.add.bind(this)
}
add ( ) {
this.setState({
count : this.state.count + 1
})

vue中的点击事件

<button @click = ’ add '></ button>
methods : {
add(){
this.a + 1
}

React事件对象，相当于vue的v-model

写了value就必须写onchange，event.target.value获取到当前输入框中的值，赋值个city，输出和value写成同一个，达到双向绑定的问题
state = {
city = “”
}
<input type = " text "
value = { this.state.city }
onChange = { this.change.bind(this) }
placeholder = " city ”
/>

change (evnet) {
this.setState( {
city: event.target.value}
)}

vue中的v-model

将输入的内容绑定到v-model上，就能实现双向绑定
< input v-model=“message” placeholder=“edit me”>
< p>Message is: {{ message }}</ p>

例如单选时

< div id=“example-5”>
< select v-model=“selected”>
< option disabled value="">请选择</ option>
< option>A</ option>
< option>B< /option>
< option>C</ option>
</ select>
< span>Selected: {{ selected }}< /span>
</ div>

new Vue({
el: ‘…’,
data: {
selected: ‘’
}
})