整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
-html的作用是设置和修改innerHTML。
下面来看看示例程序：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue v-html</title>
<script src="https://cdn.bootcss.com/vue/2.6.2/vue.min.js"></script>
</head>
<body>
<div id="test1">
<div v-html="text1"></div>
<input type="button" value="修改内部样式" @click="change()">
</div>
<script>
var vm1=new Vue({
el:'#test1',
data:{
text1:"<div id=\"test\"><div>Name is :{{name}}</div><div>Local Name is: {{jifukui[0].name}}</div></div>"
},
methods:{
change:function(){
this.text1="<div id=\"test\"><div>name is :{{name}}</div><div>Local name is: {{jifukui[0].name}}</div></div>"
}
}
});
var vm = new Vue({
el: '#test',
data: {
name:"hahahhaha" ,
jifukui:[
{
name:"jifukui"
}
]
},
});
</script>
</body>
</html>
（1）程序中包含两个vue示例vm1挂载在test1上，text1包含一个<div>的标签用于插入v-html，还有一个<input>标签用于设置改变<div>标签中的v-html的内容。
（2）第二个vue实例挂载在test上进行插值。
（1）默认样式
可以明显的看到vm1实例被渲染且vm实例也被渲染，从红色方框中的内容可以看到就是v-html的值text1的值。
（2）点击后的样式
点击后可以看到text1的值发生了改变，但是其中的关于vm实例中的内容没有被绑定替换。所以一般使用v-html进行设置和修改innerHTML的值，所以尽量不要使用v-html组合模板。
最近在项目上有个移动端（uni-app）的需求，就是要在移动端APP上的vue页面中通过web-view组件来调用html页面，并且要实现在html页面中可以点击一个元素来调用vue页面中uni的API（扫码接口），同时也可以在vue页面中也可以调用html页面中的js函数并进行传参。
1. HBuilderX版本：2.8.11.20200907
2. V3编译器
引用依赖的文件
在 web-view 加载的 HTML 中调用 uni 的 API，需要在 HTML 中引用必要的 JS-SDK
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>注意：这些 JS 文件是在 web-view 加载的那个 HTML 文件中引用的，而不是 uni-app 项目中的文件。
监听 web-view 的 message 事件
监听 web-view 组件的 message 事件，然后在事件回调的 event.detail.data 中接收传递过来的消息。
<template>
<view>
<web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage"></web-view>
</view>
</template>
<script>
export default {
methods: {
handleMessage(evt) {
console.log('接收到的消息：' + JSON.stringify(evt.detail.data));
}
}
}
</script>调用的时机
在引入上面的依赖文件后，需要在HTML中监听UniAppJSBridgeReady，事件触发后，
才能安全调用uni的API。
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
<script>
document.querySelector('.btn-list').addEventListener('click', function(evt) {
var target = evt.target;
if (target.tagName === 'BUTTON') {
var action = target.getAttribute('data-action');
if(action === 'navigateTo') {
uni.postMessage({
data: {
action: 'postMessage'
}
});
}
}
});
</script>上面代码的意思就是在html页面中点击按钮列表中的某个按钮，
触发了uni.postMessage接口，进而调用了vue页面methods中的handleMessage方法，
并将参数data传给了vue页面。
在vue页面中调用html页面的js函数
示例代码：
var currentWebview = this.$mp.page.$getAppWebview().children()[0];
currentWebview.evalJS("htmljsfuc('"+res.result+"')");其中的htmljsfuc就是要在html页面中定义的js函数。
完整代码示例：
1）定义n初始值0,
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#app",
data: {
"n": 0
},
methods: {},
computed: {},
})
</script>（2）定义自加按钮，展示n的值，和判断结果
<p><a class="btn btn-block btn-primary" @click="n++">自加</a></p>
<h2>n == {{n}}</h2>
<h3 v-text="n == 1"></h3><h1 style="color: red">使用v-show进行条件渲染</h1>
<h3 v-show="n == 1">使用v-show进行条件渲染</h3><h1 style="color: red">使用v-if进行条件渲染</h1>
<h3 v-if="n == 1">使用v-if进行条件渲染</h3><h1 style="color: red">使用if else-if else进行条件渲染 </h1>
<h3 v-if="n === 1">使用v-if进行条件渲染 if else-if - v-if="n === 1"</h3>
<h3 v-else-if="n == 2">使用v-if进行条件渲染 if else-if - v-else-if="n == 2"</h3>
<h3 v-else-if="n == 3">使用v-if进行条件渲染 if else-if - v-else-if="n == 3"</h3>
<h3 v-else>使用v-if进行条件渲染 if else-if - v-else</h3><h1 style="color: red">使用template v-if进行条件渲染 </h1>
<template v-if="n == 1">
<h3>使用v-if进行条件渲染 - template v-if="n == 1"</h3>
<h3>使用v-if进行条件渲染 - template v-if="n == 1"</h3>
<h3>使用v-if进行条件渲染 - template v-if="n == 1"</h3>
</template>执行结果
笔记分享
<pre v-show="true">
条件渲染：
1、v-if
写法：
（1）v-if = "表达式"
（2）v-else-if = "表达式"
（3）v-else = "表达式"
适用于：切换频率较低的场景
特点：不展示的DOM元素将被直接删除
注意：v-if和v-else-if、v-else一起使用的时候，要求结构不可以被打断
2、v-show
写法：v-show = "表达式"
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，使用样式进行隐藏
3、备注
使用v-if时，元素可能无法获取到，使用v-show是可获取到的
4、使用template v-if
写的时候template对内容进行了包裹，
等最终页面渲染的时候，将把template标签删掉，
这也就是说不破坏原来的样式。
但是template只能配合v-if进行使用。
</pre>源码截图
*请认真填写需求信息，我们会在24小时内与您取得联系。
